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.
- The data of
localStorageis persistent, as long as we do not actively clear it, it will always exist. - 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.
- 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.
- A page session lasts as long as the tab or the browser is open, and survives over page reloads and restores.
- 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.
- 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.