The open blogging platform. Say no to algorithms and paywalls.

Interviewer: Can sessionStorage Share Data Between Multiple Tabs?

The question that most front-end developers don’t know the answer

Recently, a friend of mine was stumped by a question about sessionStorage during an interview.

Well, I have to admit, I’m not familiar with it. My good friend, do you understand it?

Can sessionStorage share data between multiple tabs?

About the interview process

Question 1: “Do you know what is the difference between localStorage and sessionStorage?”

My friend: He felt so happy because this is the knowledge that any front-end development engineer knows.

  1. The data of localStorage is persistent, as long as we do not actively clear it, it will always exist.
  2. Closing a tab/window ends the session and clears objects in sessionStorage.

Question 2: “Can localStorage share data under the same website?”

My friend: “This is another easy one! Data can be shared between different tabs or windows under the same website”

// Let's try to set a name in window 1 page 1
localStorage.setItem("name", "fatfish");
// We try to read the current name in window 2 page 2
localStorage.getItem("name"); // fatfish

Question 3: “You are great, I want to test you one more question, Can sessionStorage share data between multiple tabs”

My friend: “No, each window or tab has a separate sessionStorage, there is no data sharing between them”

Interviewer: “Are you really sure that’s the case?”

My friend: “Eh! I’m not sure, maybe!”

Maybe my friend missed the offer because of this question but as a developer, we need to improve our knowledge and skills constantly.

What is sessionStorage?

(From mdn) The read-only sessionStorage property accesses a session Storage object for the current origin. sessionStorage is similar to localStorage; the difference is that while data in localStorage doesn’t expire, data in sessionStorage is cleared when the page session ends.

  1. Whenever a document is loaded in a particular tab in the browser, a unique page session gets created and assigned to that particular tab. That page session is valid only for that particular tab.
  2. A page session lasts as long as the tab or the browser is open, and survives over page reloads and restores.
  3. 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.
  4. Opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window.
  5. Duplicating a tab copies the tab’s sessionStorage into the new tab.

Please note the third point! Or we can find the answer here!

Suppose we write such a piece of code in https://medium.com/page/1:

btn.addEventListener("click", () => {
  window.sessionStorage.setItem("name", "fatfish");
  window.open("https://medium.com/page/2");
});

Can I get the value of the name at https://medium.com/page/2?

console.log(window.sessionStorage.getItem("name")); // null or fatfish?

Yes, the answer is fatfish. So are we sure that sessionStorage can share data between multiple tabs?

Final answer

Let’s try to continue executing a piece of code again at https://medium.com/page/1.

window.sessionStorage.setItem("name", "medium");
window.sessionStorage.setItem("age", "1000");

If sessionStorage can share data between different windows or tabs, then https://medium.com/page/2 can also get the latest values of name and age.

console.log(window.sessionStorage.getItem("name")); // 111
console.log(window.sessionStorage.getItem("age")); // null

So we can conclude that sessionStorage can’t share data between multiple windows or tabs, but when a new page is opened by window.open or a link, the new page will copy the sessionStorage of the previous page.




Continue Learning