Clear localStorage on tab/browser close but not on refresh

Issue

Is there a way to detect tab close event to clear the localStorage. I need localStorage to share data across tabs. window.onbeforeunload event works fine but it has 2 issues for me:

1. It also fires on page refresh which I dont want.
2. I don’t need confirm box on tab close.

Like when window is closed the sessionStorage is cleared. At same time I can clear localStorage but don’t know what event to bind to. I checked a few questions already available but none seems to address this issue there are workarounds by using flags for click on links and form submits but not a clean way to do it. Kindly suggest any solution for this.

Solution

I was able to find solution to this and thought of sharing.
Since the window.onbeforeunload event fires on browser/tab close but on refresh as well(which i did not want) the thing was my localstorage was being processed at time of rfresh as well. Which I did not want. In order to overcome this I implemented 1 more event handler window.onload that fires only on refresh and not on tab/browser close where I would reset the localStorage as if nothing had happened. The code is:

window.onbeforeunload = function (e) {
    window.onunload = function () {
            window.localStorage.isMySessionActive = "false";
    }
    return undefined;
};

window.onload = function () {
            window.localStorage.isMySessionActive = "true";
};

I returned undefined in window.onbeforeunload as i did not want a confirm popup to appear on tab/browser close and refresh.

Answered By – Peter

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0