SessionStorage多窗口到底能不能共享信息

一、经历

面试官：那同域下多窗口间localStorage能共享吗？😯

我：那必须可以呀（自信满满），如果页面中出现了串数据的话，很大概率就是localStorage共享导致的呢。

面试官：localStorage既然可以，那sessionStorage在多窗口之间能共享状态吗？😎

我：当然不行，每一个窗口之间sessionStorage都是独立的，相互不影响，窗口关闭浏览器就自动销毁了！（斩钉截铁，认真脸）

面试官：你确定多窗口之间sessionStorage不能共享状态吗？？？🤔

我：这个。。。。不太确定。。。。待我去查查资料再来。。。😭

二、上图：

经过一系列的学习 (百度) 之后，笔者发现如果从本页面以新开页签的方式打开一个同域下的新页面，新开的页面会和之前的页面 ‘共享’ sessionStorage

举个实际一点的例子：现有页面A，在页面A中执行

window.sessionStorage.setItem("pageA_1","123")

在页面中有个button按钮，点击按钮触发 window.open(“同源页面”)，现得到新开的页面B，在B中执行

window.sessionStorage.getItem("pageA_1") //拿到的结果是 "123"

这里的B页面居然是能拿到值的！！！！现在我终于能对面试官说：多窗口之间sessionStorage真的可以共享状态！！

三、真的是这样吗？

哎，等等，如果真的能共享数据，那 sessionStorage 不是也会出现串数据的情况吗，我怎么记得平时并不会。。。

接下来我们继续测试，在页面A中继续执行

window.sessionStorage.setItem("pageA_1","456") (之前的pageA_1设置的值是 ‘123’ )
window.sessionStorage.setItem("pageA_2","789")

在页面B中再次尝试获取：

window.sessionStorage.getItem("pageA_1") //拿到的结果还是 "123" !!!
window.sessionStorage.getItem("pageA_2") //拿到的结果是 null !!!

what??? 怎么回事？怎么现在又不‘共享’了呢？

我们现在再次回去理解一下MDN的说法：在该标签或窗口打开一个新页面时会复制顶级浏览会话的上下文作为新会话的上下文

哦～ 原来如此～ 原来只有在本页面中以新页签或窗口打开的同源页面会‘临时共享’之前页面的sessionStorage。

而且共享这个词似乎也并不怎么准确，准确来说应该叫复制更加专业！

现在我终于能再次对面试官说：多窗口之间sessionStorage不可以共享状态！！！但是在某些特定场景下新开的页面会复制之前页面的sessionStorage！！

此时面试官：嗯～小伙子看来理解的还不错嘛

四、总结

其实不仅window.open("同源页面")这种方式新开的页面会复制之前的sessionStorage，通过a标签新开的页面同样也会，原理相同，在这就不赘述了。

五、其他

这里可能有部分同学要问了：如果我就是不想要这种复制的效果怎么办呢？这里笔者认为优雅一点的方式是先新建一个空白页面窗口，再将url设置到窗口中的地址栏中去。
转载