The background,

Interviewer: Tell me the difference between localStorage and sessionStorage. 😊

Me: Blah blah blah… (This is not a small case, face all back rotten)

Interviewer: Can multiple Windows in the same domain share localStorage? 😯

I: can ah, if the page appeared in a string of data, a large probability is caused by localStorage sharing it.

Interviewer: localStorage if yes, can sessionStorage share state between multiple Windows? 😎

I: of course not, between each window sessionStorage is independent, do not affect each other, the window closed browser automatically destroyed! (Firmly, seriously)

Interviewer: Are you sure sessionStorage cannot share state between multiple Windows?? 🤔

Me: Well… Not sure… I’ll come back after I do some research… 😭

This leads to today’s topic: Can sessionStorage share state between multiple Windows in the same domain?

Second, refer to the documentation

According to MDN:

The sessionStorage property allows you to access a sessionStorage object corresponding to the current source. It is similar to localStorage except that data stored in localStorage does not have an expiration date, while data stored in sessionStorage is cleared when the page session ends.

  1. The page session remains as long as the browser is open, and the original page session remains when the page is reloaded or restored.
  2. The top-level browsing session context is copied as the context for the new session when a new TAB or window opens a page, unlike session cookies.
  3. Opening multiple Tabs pages with the same URL creates their ownsessionStorage.
  4. Close the corresponding browser TAB or window to clear the correspondingsessionStorage.

For the above statement, point 134 is believed to be consistent with everyone’s cognition, so what does the second point mean?

In order to understand the second point, I continue to consult the documentation…

After a series of learning (Baidu), the author found that if you open a new page in the same domain by opening a new TAB from this page, the new page will ‘share’ the sessionStorage with the previous page.

Let’s take A practical example: existing page A, executed on page A

window.sessionStorage.setItem("pageA_1"."123")
Copy the code

There is a button in the page, click the button to trigger window.open(” homologous page “), now get a new page B, execute in B

window.sessionStorage.getItem("pageA_1") // get "123"
Copy the code

The B page here is actually can get the value ！！！！

Now I can finally say to the interviewer: multi-window sessionStorage really can share state!!

Interviewer: Here is another chance for you to organize the language 🤔️

Is this really the case?

SessionStorage: sessionStorage: sessionStorage: sessionStorage: sessionStorage: sessionStorage: sessionStorage: sessionStorage: sessionStorage

Next, let’s continue testing and execute on page A

window.sessionStorage.setItem("pageA_1"."456"PageA_1 = pageA_1; pageA_1 = pageA_1123')window.sessionStorage.setItem("pageA_2"."789")
Copy the code

Try again on page B to get:

window.sessionStorage.getItem("pageA_1") // get "123" again!!
window.sessionStorage.getItem("pageA_2") // Get null!!
Copy the code

what??? What’s going on? Why not ‘share’ now?

Let’s go back to MDN again: the context of the top-level browsing session is copied as the context of the new session when the TAB or window opens a new page

Only same-origin pages opened with a new TAB or window in this page will ‘temporarily share’ the previous page’s sessionStorage.

And the word “sharing” doesn’t seem to be very accurate, it should be called copying more professional!

Now I can finally say to the interviewer again: sessionStorage cannot share state between multiple Windows!! However, in certain scenarios, the new page will copy the previous page’s sessionStorage!!

Interviewer: Well, the young man seems to understand quite well

Four,

In fact, not only window.open(” same-origin page “), the new page will copy the previous sessionStorage, the same principle, I don’t need to describe here.

Five, the other

Some of you might be asking: What if I just don’t want this duplication?

Here I think the elegant way is to first create a blank page window, and then set the URL to the address bar in the window.

Finally, I hope this article can help you 😁, if there is a mistake in the article, I hope we actively correct ~.