Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SessionStorage is not empty when link opened in new tab in Internet Explorer

I need to have some unique id on every opened browser tab (in a javascript object). The Id must be saved through requests and i decided to use sessionStorage for it.

When i opens the new page in browser it works well.
But when i click a link by right mouse button and choose 'Open link in new tab' in IE 11 - sessionStorage is not empty. So my expectations about new id failed .

Chrome works another way, sessionStorage is empty.

Does anyone know how to solve this problem for IE?

like image 577
Roman Kamorin Avatar asked Jun 24 '14 08:06

Roman Kamorin


People also ask

Is session storage available in new tab?

Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work. Opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window.

Does session storage work across tabs?

The sessionStorage exists only within the current browser tab. Another tab with the same page will have a different storage. But it is shared between iframes in the same tab (assuming they come from the same origin).

How can I tell if sessionStorage is empty?

write(sessionStorage. getItem('value1')); most browser will render it as null if its empty.


1 Answers

I know this is an ancient question but I just today struggled with this myself. I was opening a new tab with a link with target="_blank" expecting the sessionStorage to be empty. It was not.

NOTE: All of this is untested code but you should get the jist. Also the browser I was experiencing this problem with was Firefox 44.0.2.

My code was something along these lines:

Problematic code:

$(window).ready(function(){
    //Get saved session data
    var persistedObject = null;

    try{
        persistedObject = JSON.parse(sessionStorage.getItem('tabData'));
    }catch(e){}
});

function updateSessionStorage(){
    var objectToPersist = {};

    //Get some data to persist
    objectToPersist.value1 = "some data";

    //Save the data in the session storage
    sessionStorage.setItem('tabData', JSON.stringify(objectToPersist));
}

This picked up data from earlier tabs that were closed.

I solved this by changing my code to something like this:

Working code:

$(window).ready(function(){
    //Get saved session data
    var persistedObject = null;

    try{
        persistedObject = JSON.parse(window.name);
    }catch(e){}
});

function updateSessionStorage(){
    var objectToPersist = {};

    //Get some data to persist
    objectToPersist.value1 = "some data";

    //Save the data in the session storage
    window.name = JSON.stringify(objectToPersist);
}

This worked beautifully. The window name is persisted until you close the tab/window, which is exactly what I was expecting sessionStorage to do. New pages is always loaded with window.name = "" if no name was given on the link handling side.

What you might miss out on is the fact that you can't straight out of the box use names such as my sessionStorage.setItem('tabData', 'some data') but you can easily avoid this by doing something like this:

Suggestion:

function updateSessionStorage(){
    var objectToPersist = {};

    try{
        objectToPersist = JSON.parse(window.name);
    }catch(e){}

    if(objectToPersist[tabData] == undefined){
        objectToPersist.tabData = {};
    }

    //Get some data to persist
    objectToPersist.tabData.value1 = "some data";

    //Save the data in the session storage
    window.name = JSON.stringify(objectToPersist);
}

I hope someone finds this useful.

like image 198
Tero Heiskanen Avatar answered Nov 03 '22 10:11

Tero Heiskanen