How to prevent calling onbeforeunload when page refresh?

Question

I am working on React Js Application, I am using Localstorage for managing the Application Token. And i want, when user close the TAB, localsotorage will get empty. For that i am using beforeunload.

window.addEventListener("beforeunload", () => localStorage.clear());

But this things also call when i refresh the browser. I want to prevent it, that when user refresh the browser, localstorage not clear. How can i achive it?

I can not want to use sessionStorage because i need to communicate token/record with other tabs as well.

Answer 1

You can use the PerformanceNavigationTiming.type to

check if page gets reloaded or refreshed in JavaScript

const pageAccessedByReload = (
   (window.performance.navigation && window.performance.navigation.type === 1) ||
    window.performance
       .getEntriesByType('navigation')
       .map((nav) => nav.type)
       .includes('reload')
);

alert(pageAccessedByReload);

Review Илья Зеленько's original post here