sessionStorage between two pages

Question

I'm trying to set a variable on one page and then display it on another page. Both pages exist on the same domain. I've never used sessionStorage before so I'm not really sure where I made my mistake. The second page is just a blank page for some reason. Here is the code on the first page that sets the variable.

if (typeof(Storage) != "undefined") {
    // Store
    sessionStorage.setItem("score", 12);
    document.getElementById("result").innerHTML = ("score");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}

And here is the code on the second page that is supposed to retrieve the variable and print it to the screen.

if (typeof(Storage) != "undefined") {
    // Retrieve
    document.getElementById("result").innerHTML = sessionStorage.getItem("score");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}

Any insight on why this isn't getting the variable would be great thanks.

Some read about when to use sessionStorage and when to use localStorage [here](http://stackoverflow.com/questions/5523140/html5-local-storage-vs-session-storage) and [here](http://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookie) — Alexandru Chichinete, Jul 28 '15 at 14:54

score 5 · Accepted Answer · answered Jul 28 '15 at 15:15

5

As Yiriy pointed out, localStorage should be used instead of sessionStorage when trying to share a variable between multiple windows/tabs of the browser.

So use:

localStorage.setItem("score",12);

and

document.getElementById("result").innerHTML = localStorage.getItem("score");

in the other tab

Just think of sessionStorage stores local variables while localStorage stores global variables.

answered Jul 28 '15 at 15:15

Huan Zhang

1,095
8
13

ok, i did that, but the second tab is still just a blank page and doesn't seem to be getting the updated variable – datdudebp Jul 28 '15 at 15:16
can you paste all of the code here or link me to a codepen/jsfiddle? Could be something else you are doing wrong – Huan Zhang Jul 28 '15 at 15:21
if you separated your code on both pages, are you sure the result element exists on both pages? – Huan Zhang Jul 28 '15 at 15:37
ok, once you said that i looked back through the code and realized it was being called in the right spot. Thanks for your help – datdudebp Jul 28 '15 at 15:58
np dude happy to help :) – Huan Zhang Jul 28 '15 at 16:11

score 4 · Answer 2 · answered Jul 28 '15 at 14:50

4

"...sessionStorage gets cleared when the page session ends"

Use localStorage instead.

answered Jul 28 '15 at 14:50

Yuriy Galanter

38,833
15
69
136

the same thing happened when I used localStorage – datdudebp Jul 28 '15 at 14:54

score 1 · Answer 3 · answered Jul 28 '15 at 14:55

1

As in sessionStorage description:

it gets cleared when the page session ends
opening a page in a new tab or window will cause a new session to be initiated

Use localStorage instead

answered Jul 28 '15 at 14:55

tkeram

214
1
5

1

I actually originally used localStorage, but the same thing happened, a blank screen on the second page. Any idea why? – datdudebp Jul 28 '15 at 15:04

Venugopal · Answer 4 · 2022-02-19T16:01:49.310

When a user opens a new tab, we first ask any other tab that is opened if he already have the sessionStorage for us. If any other tab is opened it’ll send us the sessionStorage through localStorage event, we’ll duplicate that into the sessionStorage.

// on opening the new tab, we check the session storage. 
// if it's empty, we send (from the new tab) an localStorage event, with particular key(getSessionStorage), by setting some value in localStorage
if (!sessionStorage.length) {
  localStorage.setItem('getSessionStorage', Date.now()); // send Event1 from new tab
};

window.addEventListener('storage', function(event) {
  // in first tab, we listen for the "getSessionStorage" event and set the sessionStorage info in the localStorage.
  if (event.key == 'getSessionStorage') { // Event1 captured in first tab
    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage)); // emit Event2 from first tab. this contains session storage info.
    localStorage.removeItem('sessionStorage');
  } else if (event.key == 'sessionStorage' && !sessionStorage.length) { // capture Event2 in new tab. read the event value and set in session storage in new tab
    var data = JSON.parse(event.newValue);
    for (key in data) {
      sessionStorage.setItem(key, data[key]);
    }
  }
});

source - https://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/

An explanation of any code is always appreciated. – john k Feb 04 '22 at 19:24 — john k, Feb 04 '22 at 19:24

sessionStorage between two pages

4 Answers4