browser sessionStorage. share between tabs?
You can use localStorage and its "storage" eventListener to transfer sessionStorage data from one tab to another.
This code would need to exist on ALL tabs. It should execute before your other scripts.
// transfers sessionStorage from one tab to another
var sessionStorage_transfer = function(event) {
if(!event) { event = window.event; } // ie suq
if(!event.newValue) return; // do nothing if no value to work with
if (event.key == 'getSessionStorage') {
// another tab asked for the sessionStorage -> send it
localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
// the other tab should now have it, so we're done with it.
localStorage.removeItem('sessionStorage'); // <- could do short timeout as well.
} else if (event.key == 'sessionStorage' && !sessionStorage.length) {
// another tab sent data <- get it
var data = JSON.parse(event.newValue);
for (var key in data) {
sessionStorage.setItem(key, data[key]);
}
}
};
// listen for changes to localStorage
if(window.addEventListener) {
window.addEventListener("storage", sessionStorage_transfer, false);
} else {
window.attachEvent("onstorage", sessionStorage_transfer);
};
// Ask other tabs for session storage (this is ONLY to trigger event)
if (!sessionStorage.length) {
localStorage.setItem('getSessionStorage', 'foobar');
localStorage.removeItem('getSessionStorage', 'foobar');
};
I tested this in chrome, ff, safari, ie 11, ie 10, ie9
This method "should work in IE8" but i could not test it as my IE was crashing every time i opened a tab.... any tab... on any website. (good ol IE) PS: you'll obviously need to include a JSON shim if you want IE8 support as well. :)
Credit goes to this full article:
http://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/
Why is sessionStorage preserved across multiple tabs?
The session has to work that way to maintain state if you navigate to another link within the same application. If you want to open a tab without that session try using incognito mode. Incognito mode will open window with fresh session.
sessionStorage on new window isn't empty, when following a link with target="_blank"
Javascript sessionStorage Across tabs?
As far as html5 storage goes i would go for localStorage in your case.
See below for the differences.
Session Storage:
- Values persist only as long as the window or tab in which they
stored. - Values are only visible within the window or tab that
created them.
Local Storage:
- Values persist window and browser lifetimes.
- Values are shared across every window or tab running at the same origin.
Read more here
Angular - sharing session between the tabs of the same browser
As Alex is pointing out in his comment, it's best to implement some form of authentication for this use case.
If you expect different users to use one machine and don't want their sessions to overlap, it's pretty much your only solution.
As you said yourself, sessionStorage is limited to a given tab while the next highest option would be localStorage (that one however remains even after closing the browser). Perhaps you could try to listen to a browser close event or remove the localStorage entry after a given time but that too is not even close to being reliable.
As for cookies, you'd be looking at the same situation as with localStorage.
Related Topics
Change Value of Input and Submit Form in JavaScript
How to Add Dom Element Script to Head Section
Jquery "Blinking Highlight" Effect on Div
Jquery to Change Style Attribute of a Div Class
Cannot Set Property 'Display' of Undefined
Set Height of <Div> = to Height of Another <Div> Through .Css
How to Get a Floating Footer to Stick to the Bottom of the Viewport in Ie 6
How to Detect Support for the HTML5 "Download" Attribute
Browsers Automatically Evaluate Hex or Hsl Colors to Rgb When Setting via Element.Style.Background
How to Animate the Drawing of Text on a Web Page
How to Window.Scrollto() with a Smooth Effect
How to Check Element's Visibility via JavaScript
Cannot Access CSSrules from Local CSS File in Chrome 64