sessionStorage可以在多个Tab之间共享数据吗？

一、MDN

只读 sessionStorage 属性访问当前源的会话存储对象。sessionStorage与localStorage类似；不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。

在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookie 的运行方式不同。

打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。

关闭对应浏览器标签或窗口，会清除对应的 sessionStorage。

二、求证

假设我们在https://medium.com/page/1中写了这样一段代码：

btn.addEventListener('click', () => {
  window.sessionStorage.setItem('name', 'fatfish')
  window.open('https://medium.com/page/2')
})

我可以在 https://medium.com/page/2 获取名称值吗？

console.log(window.sessionStorage.getItem('name')) // null or fatfish?

是的，答案就是fatfish。那么，我们确定 sessionStorage 可以在多个选项卡之间共享数据吗？

三、答案

让我们尝试再次继续执行 https://medium.com/page/1 上的一段代码。

window.sessionStorage.setItem('name', 'medium')
window.sessionStorage.setItem('age', '1000')

如果sessionStorage可以在不同窗口或选项卡之间共享数据，那么https://medium.com/page/2也可以获取name和age的最新值

console.log(window.sessionStorage.getItem('name')) // 111
console.log(window.sessionStorage.getItem('age')) // null

所以，我们可以得出结论，sessionStorage不能在多个窗口或选项卡之间共享数据，但是，当通过window.open或链接打开新页面时，新页面会复制上一个页面的sessionStorage。

四、最后

本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。顺手来个三连击，点赞👍收藏💖关注?，一起加油?