前言

在现代浏览器中，sessionStorage 存储的内容，一般情况下只可以在当前打开的 tab 页使用。但这样也存在问题，用户打开其他的页面那就没有 sessionStorage 了？

测试

其实，sessionStorage 有一套 “继承” 的机制，使得不同 tab 页中可以传递。以下测试研究 sessionStorage 的 “继承” 机制。（sessionStorage 不支持跨域，跨域了在任何时候都不能 “继承”，下面的测试都是同域测试）。

1. a 标签直接跳转

<a href="./a.html">a 页面</a>

通过这种方式，其实 tab 并没有变化，这并不存在 “继承” 的问题，原来的 sessionStorage 依然可用。

2. a 标签设置 target="_blank" 跳转

<a href="./b.html" target="_blank">b 页面</a>

这种方式会导致 sessionStorage 丢失，也就是并不能 “继承”。

3. window.open() 方法跳转

window.open("./c.html");

这种方法可以 “继承” 源页面的 sessionStorage。

测试总结

1. 可以看到，当前 tab 页打开链接，不存在需要 “继承” 的问题，这很好理解。因为 tab 与 sessionStorage 绑定关系，没有更换 tab，那原来的 sessionStorage 继续可用。
2. 用 a 标签在 tab 中打开链接，就不能 “继承” 源页面的 sessionStorage 了，这是由于 a 标签带了 target="_blank" 属性后，会相当于隐形添加了 ref="noopener"，导致与源页面并没有上下文关系，我们只需要在 a 标签中添加 ref="opener" 即可让新页面跟源页面保持上下文联系，这样就可以 “继承” sessionStorage 了
3. window.open() 方法是同样的道理，此方法会在新页面与源页面之间建立上下文关系 window.opener 会是上一个页面的 window 对象，这样是可以正常 “继承” sessionStorage 的。
4. 这里的 “继承” 是真正的继承吗？答案并不是，这里的继承，只是源页面 sessionStorage 的一份拷贝，源页面的修改，并不会影响新页面的 sessionStorage，反之亦然。