关于面试的过程

问题 1：“你知道 localStorage 和 sessionStorage 的区别吗？”

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

localStorage 的数据是永久的，只要我们没有主动去清除它，数据就会一直存在。
关闭一个 tab 或者窗口时会结束会话并清除在 sessionStorage 中保存的对象。

问题 2：“可以在同源下共享 localStorage 的数据吗？”

我朋友：“这也是一个简单的问题！数据可以在同一个网站的不同的 tab 或者窗口中共享”

// Let's try to set a name in window 1 page 1
localStorage.setItem('name', 'fatfish')
// We try to read the current name in window 2 page 2
localStorage.getItem('name') // fatfish

问题 3：“你回答的非常不错，我想要问多你一个问题，请问可以在多个 tab 之间共享 sessionStorage 的数据吗？”

我朋友：“不可以，每个窗口或者 tab 都有各自的 sessionStorage，不可以在它们之间共享数据”

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

我朋友：“额，我不确定，可能吧！”

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

什么是 sessionStorage?

（来自 MDN）只读 sessionStorage 属性访问当前源的会话存储对象。sessionStorage 和 localStorage 有点类似；区别在于 localStorage 中的数据不会过期，而 sessionStorage 中的数据会在页面会话结束时清除掉。

每当文档加载到浏览器的具体 tab 后，唯一的页面会话就会生成并分配给这个具体的 tab。这个页面会话仅对具体的 tab 生效。
只要这个 tab 或者浏览器是打开的，页面会话就会一直存在，并且在页面重新加载和恢复后仍然存在。
在一个新的 tab 或者窗口打开页面就会创建一个具有顶级浏览器上下文的新 session ，这与 session cookie 的工作方式不同。
在多个 tab 或者窗口中打开相同的 URL 会为每个 tab 或者窗口创建 sessionStorage。
复制 tab 会将这个 tab 的 sessionStorage 也复制到这个新的 tab 中。

请注意第三点！我们可以从中找到答案！

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

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

我可以在 medium.com/page/2 得到 name 的值吗？

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

是的，答案是 fatfish。所以我们可以确定 sessionStorage 可以在多个 tab 中共享数据吗？

最终答案

让我们在 medium.com/page/1 再次尝试执行这段代码：

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

如果 sessionStorage 可以在不同的窗口或者 tab 间共享数据，那么 medium.com/page/2

就可以获得 name 和 age 的最新值

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

所以我们可以得出结论：sessionStorage 不可以在多个窗口或者 tab 间共享数据，但是当新的页面是通过 window.open 或者链接的形式打开的，那么新的页面就会复制上一个页面的 sessionStorage 到新的页面中。

面试官：sessionStorage 可以在多个 tab 间共享数据吗？

关于面试的过程

什么是 sessionStorage?

最终答案