session storage does not working on different tab

Question

I want to pass some data between different tabs using sessionStorage on my local server. I have tried some ways but could not succeed. Anyone please help me.

This is my one file where I am setting my data.

if (typeof(Storage) !== "undefined") {
    var loggedInUserId = loggedInId;
    console.log(loggedInUserId);
    sessionStorage.clear();
    sessionStorage.setItem("loggedin_id", loggedInUserId);
    console.log(sessionStorage);
}

and I am trying to fetch the data from other file of another project of my local drive

var companyId = sessionStorage.getItem("loggedin_id");

The problem is, data is setting on the browser but when I check on my other project tab the storage remain empty.

note: my two projects are in two drives, dont know its makes difference or not. Please anyone give me some way to solve it. thank you .

My first guess would be that the two tabs don't share the same session. Can you use localStorage? — Halcyon, Feb 02 '17 at 12:07
Do you mean by "two drives" a static html file stored on two distinct paths? If so, the "domain" is also different and will not share the session. — Balazs Vago, Feb 02 '17 at 12:10
"two drives" is my setItem localStorage is in D:\\ drive and getItem storage is in C:\\ drive xampp folder. But both the files are running on PHP and I have route the D:\\ drive project to Xampp in hosts file. — Rajesh Dey, Feb 03 '17 at 04:26

score 2 · Answer 1 · answered Feb 02 '17 at 23:29

2

Session storage is not the appropriate tool for your task you should be using local storage For sessionStorage, changes are only available per window (or tab in browsers like Chrome and Firefox)

in your case you want the data to be shared throughout different tabs so you can do something like this :

if (typeof(Storage) !== "undefined") {
    localStorage.setItem("firstname", "fady");
} else {
    // Sorry! No Web Storage support..
}

and then you can retrieve it just the same you did with your session storage

var firstname = localStorage.getItem("firstname");

answered Feb 02 '17 at 23:29

Fady Sadek

1,091
1
13
22

I had done the exact thing. First I tried with localStorage, when it does not work I switch to sessionStorage. But still not working. Actually I am confused about the getItem stuff. Should I put var firstname = localStorage.getItem("firstname"); to the different project file, where I want to fetch the data..?? – Rajesh Dey Feb 03 '17 at 04:35
Yes this way you can retrieve the data here you can find a youtube video that explains how you can do it https://www.youtube.com/watch?v=0CDi-CgflN4 – Fady Sadek Feb 03 '17 at 04:42
Thank you for your rply, But I checked it right a way. If I use "setItem" and "getItem" in the same file its perfectly working, but not working on other tab. If I open another tab and use localStorage on my console it return 0 length, null. please help. I am using chrome. – Rajesh Dey Feb 03 '17 at 05:01

score 0 · Accepted Answer · edited May 23 '17 at 11:45

Fady Sadek's answer is the right way to do it, I would add a check if the localStorage is available before getting the value as well, and if the data is actually saved before trying to get it.

JS Fiddle

function saveText() {
    if (typeof(Storage) !== "undefined") {
        localStorage.setItem("myData", "Hello, Rajesh!");
        alert('Data saved.');
    } else {
        alert('Local storage not available');
    }
}

function getText() {
    if (typeof(Storage) !== "undefined" && typeof(localStorage.getItem('myData')) !== "undefined") {
        alert(localStorage.getItem('myData'));
    } else {
        alert('Local storage not available or the data is not saved.');
    }
}

Keep in mind the scopes of the storage, you can only use it between tabs/windows within the same subdomain and/or the domain.

session storage does not working on different tab

2 Answers2