同域下多窗口间 localStorage 能共享吗?

  • 答案是可以,如果页面中出现了串数据的话,很大概率就是 localStorage 共享导致的。

那么, sessionStorage 在多窗口之间能共享状态吗?

# 一、查阅文档

根据 MDN 的说法: sessionStorage 属性允许你访问一个,对应当前源的 session Storage 对象。它与 localStorage 相似,不同之处在于 localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

  1. 页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。
  2. 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文, 这点和 session cookies 的运行方式不同。
  3. 打开多个相同的 URL 的 Tabs 页面,会创建各自的 sessionStorage
  4. 关闭对应浏览器标签或窗口,会清除对应的 sessionStorage

对于上面的说法,第 134 点相信都是符合大家认知的,那第二点是啥意思呢?

笔者为了搞懂第二点,接着继续查阅文档。。。

经过一系列的学习 (百度) 之后,笔者发现如果从本页面以新开页签的方式打开一个同域下的新页面,新开的页面会和之前的页面 ‘共享’ 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 设置到窗口中的地址栏中去。