sessionStorage 能在多个标签页之间共享数据吗？

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

最近，我的一个朋友在面试中被一个关于 sessionStorage 的问题难住了。我们来聊聊这个话题。

sessionStorage 能在多个标签页之间共享数据吗？在回答这个问题之前我们先来聊聊另一个存储API localstorage

localstorage与sessionStorage经常是放在一起讨论，那他们之间的区别是什么呢？

只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除。(这是来自MDN的解释)

那么 localstorage可以在同一网站下共享数据吗？答案显而易见是可以的。

// 你可以在第一个tab里面存储一个数据
localStorage.setItem('name', 'fatfish')
// 在另外一个tab读取这个数据
localStorage.getItem('name') // fatfish

那么sessionStorage呢？ 来看看MDN中的解释

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

根据第二点，在新打开的页面上应该是可以共享数据的，基于此我本人尝试了一下在掘金主页(juejin.cn/) 下执行以下代码

window.sessionStorage.setItem('canShare','yes')

然后随机打开首页的推荐文章(juejin.cn/post/734279…) 读取数据

window.sessionStorage.getItem('canShare') // null

所以结论是不行，MDN上的解释错了？ 我们再做以下测试在掘金主页(juejin.cn/) 下执行以下代码

window.sessionStorage.setItem('canShare','yes');
window.open('https://juejin.cn/post/7342793254096109583', 'aa');

然后随机打开首页的推荐文章(juejin.cn/post/734279…) 读取数据

window.sessionStorage.getItem('canShare') // yes

回过头来我再对掘金首页做以下操作

window.sessionStorage.setItem('canShare','yes');

然后我把推荐文章链接中的target="__blank"属性删除，然后再次点击打开 然后执行

window.sessionStorage.getItem('canShare') // yes

成功的打印出了数据。

结论:

因此，我们可以得出结论：

sessionStorage 不能在多个窗口或标签页之间共享数据，但是当通过 window.open 或链接打开新页面时(不能是新窗口)，新页面会复制前一页的 sessionStorage。

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。