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

好吧，我不得不承认，我对此并不熟悉。 我的好朋友，你明白了吗？

sesstionStorage可以在多个tab之间共享数据吗？

关于面试过程

问题一：“你知道localStorage和sessionStorage有什么区别吗？”

我的朋友：他感到很高兴，因为这是任何前端开发工程师都知道的知识。

localStorage的数据是持久化的，只要我们不主动清除它，它就会一直存在。

关闭选项卡/窗口会结束会话并清除 sessionStorage 中的对象。

问题2：“localStorage可以在同一个网站下共享数据吗？”

我的朋友：“这是另一个简单的！ 数据可以在同一网站下的不同选项卡或窗口之间共享”

// 让我们尝试在 window 1 page 1 中设置一个name
localStorage.setItem('name', 'fatfish')
// 我们尝试在window 2 page 2中读取当前name
localStorage.getItem('name') // fatfish

问题三：“你太棒了，我想再考你一个问题，sesstionStorage是否可以在多个tab之间共享数据”

我的朋友：“不，每个窗口或选项卡都有一个单独的 sessionStorage，它们之间没有数据共享”

面试官：“你真的确定是这样吗？”

我朋友：“诶！ 我不确定，也许吧！”

也许我的朋友因为这个问题错过了offer，但是作为开发者，我们需要不断的提升自己的知识和技能。

什么是会话存储？

（来自 mdn）只读 sessionStorage 属性访问当前来源的会话存储对象。 sessionStorage 类似于 localStorage； 不同之处在于，localStorage 中的数据不会过期，而 sessionStorage 中的数据会在页面会话结束时被清除。

1. 每当在浏览器的特定选项卡中加载文档时，都会创建一个唯一的页面会话并将其分配给该特定选项卡。 该页面会话仅对该特定选项卡有效。
2. 只要选项卡或浏览器打开，页面会话就会持续，并在页面重新加载和恢复后继续存在。
3. 在新选项卡或窗口中打开页面会创建一个具有顶级浏览上下文值的新会话，这与会话 cookie 的工作方式不同。
4. 使用相同的 URL 打开多个选项卡/窗口会为每个选项卡/窗口创建 sessionStorage。
5. 复制选项卡会将选项卡的 sessionStorage 复制到新选项卡中。

请注意第三点！ 或者我们可以在这里找到答案！

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

我可以在 https://mysite.com/page/2 获取name的值吗？

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

是的，答案是fatfish。 那么我们确定sesstionStorage可以在多个tab之间共享数据吗？

最终答案

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

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

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

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

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