Right, sessionStorage is not shared across tabs. The way I solved it is by using localStorage events. When a user opens a new tab, we first ask any other tab that is opened if he already have the sessionStorage for us.
Local storage persists in different tabs/windows when using the same browser on the same machine. It does not persisted across a domain.
The sessionStorage object stores data for only one session. (The data is deleted when the browser is closed).
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/
Using sessionStorage
for this is not possible.
From the MDN Docs
Opening a page in a new tab or window will cause a new session to be initiated.
That means that you can't share between tabs, for this you should use localStorage
Actually looking at other areas, if you open with _blank it keeps the sessionStorage as long as you're opening the tab when the parent is open:
In this link, there's a good jsfiddle to test it. sessionStorage on new window isn't empty, when following a link with target="_blank"
You can just use localStorage
and remember the date it was first created in session cookie
. When localStorage
"session" is older than the value of cookie then you may clear the localStorage
Cons of this is that someone can still read the data after the browser is closed so it's not a good solution if your data is private and confidental.
You can store your data to localStorage
for a couple of seconds and add event listener for a storage
event. This way you will know when any of the tabs wrote something to the localStorage
and you can copy its content to the sessionStorage
, then just clear the localStorage
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With