SessionStorage browser wide (scope) or LocalStorage deleted on exit

Question

Is there any mechanism that would allow me handle the values on a browser level? What I mean is either:

• sessionStorage that I can access values in ANY tab in browser (something like server side sessions)

• localStorage that would be removed on session end (when closing the browser, not tab)

For example, the video starts in player in one tab. Some flag is stored in that kind of storage. When user opens another tab with the same URL, app should read that flag and dissalow playing the video. Of course it should be removed on exit, otherwise flag would dissalow all the future requests in that browser. Any suggestions?

Answer 1

Finally I gave up of the server side sessions because it raised other issues, and solved it with this workflow:

• After page load, localStorage value is set if it hasn't been before, as well as flag that the player is opened in this tab. If the localStorage is already set, flag is set to false.

• If flag is set, play video, otherwise prohibit.

• On page unload, only if the flag is set (that is, if user opened video in this tab), remove localStorage value.

$(function () {
    if (localStorage.playerTabOpened) {
        var dateNow = Date.now();
        var diffSinceLastTabOpened = (dateNow - localStorage.playerTabOpened) / 1000;
        // if playerTabOpened value was stored more than 1 day ago, delete it anyway because it could be left by chance
        if (diffSinceLastTabOpened > 86400) {
            localStorage.removeItem("playerTabOpened");
        };
    }
    if (!localStorage.playerTabOpened) {
        shared.playerTabOpenedHere = true;
        localStorage.setItem("playerTabOpened", Date.now());
    } else {
        shared.playerTabOpenedHere = false;
    }
});

$(window).on("beforeunload", function () {
    if (shared.playerTabOpenedHere) {
        localStorage.removeItem("playerTabOpened");
    }
});

if (shared.playerTabOpenedHere) {
    // play
} else {
    // throw error
}