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

2024-09-18

2434 字约 9 分钟

...

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

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

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

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

localStorage.setItem('name', 'fatfish')

localStorage.getItem('name')

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

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

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

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

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

window.sessionStorage.getItem('canShare')

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

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

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

window.sessionStorage.getItem('canShare')

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

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

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

window.sessionStorage.getItem('canShare')

成功的打印出了数据。

结论:

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

我理解：sessionStorage 就是会话级别的存储（关键在于会话）

如何定义一个会话？
在A页面点击超链接或者在控制台window.open打开页面B，都是属于当前页面的延续，属于一个会话。
在A页面已经打开的前提下，然后在新tab打开同域页面C，此时C和A页面无直接关系，不属于一个会话。

本文中已经说了的，sessionSession并不是共享的，而是复制的。

也就是说，B页面打开的时候复制了A页面的sessionSession，仅仅是复制
此时，无论修改A页面的sessionStorage还是修改B页面的SessionStorage，都不会彼此影响。
也就是说两个页面存储的SessionStorage数据都不会同步变化（各自都是自己的存储，存储独立存在）。我理解：sessionStorage 就是会话级别的存储（关键在于会话）

如何定义一个会话？
在A页面点击超链接或者在控制台window.open打开页面B，都是属于当前页面的延续，属于一个会话。
在A页面已经打开的前提下，然后在新tab打开同域页面C，此时C和A页面无直接关系，不属于一个会话。

本文中已经说了的，sessionSession并不是共享的，而是复制的。

也就是说，B页面打开的时候复制了A页面的sessionSession，仅仅是复制
此时，无论修改A页面的sessionStorage还是修改B页面的SessionStorage，都不会彼此影响。
也就是说两个页面存储的SessionStorage数据都不会同步变化（各自都是自己的存储，存储独立存在）。

A页面点击超链接跳转到B页面，如果是target="_self"，跳转是在同一个浏览器tab页面里面进行的，此时不管怎么操作session，在同一个tab里面两个页面的session都是一样的。
如果target="_blank"，也得分为两种情况
1. 如果a标签没有rel="opener"属性，此时不会携带session。
2. 如果a标签有rel="opener"属性，则适用前面的原则，即从A跳转到B是一个会话，B页面会复制A页面的session，此时在B页面回退（因为是新tab打开，所以无法回退，只能是重新有一个a标签，点击之后打开新tab，同样适用前面A页面的点击跳转规则），即打开新的A页面A1，此时A1页面是复制的B页面的session，如果B页面的session是修改过的，那么A1就是复制的最新的B页面的session。
  <a href="./b.html" target="_self" rel="opener">b.html</a>1、A页面点击超链接跳转到B页面，如果是target="_self"，跳转是在同一个浏览器tab页面里面进行的，此时不管怎么操作session，在同一个tab里面两个页面的session都是一样的。
如果target="_blank"，也得分为两种情况
1. 如果a标签没有rel="opener"属性，此时不会携带session。
2. 如果a标签有rel="opener"属性，则适用前面的原则，即从A跳转到B是一个会话，B页面会复制A页面的session，此时在B页面回退（因为是新tab打开，所以无法回退，只能是重新有一个a标签，点击之后打开新tab，同样适用前面A页面的点击跳转规则），即打开新的A页面A1，此时A1页面是复制的B页面的session，如果B页面的session是修改过的，那么A1就是复制的最新的B页面的session。
  <a href="./b.html" target="_self" rel="opener">b.html</a>