关于谷歌Chrome浏览器sessionStorage的跨tab页共享问题

Chrome浏览器跨tab页sessionStorage共享问题

问题现象

在当前页面下开启一个新的同源tab页sessionStorage中的内容未有效共享到新开tab页中，导致新开tab页sessionStorage为空。

解决办法

首先抛出一个十分简单的解决办法，那就是使用window.open()方法打开这个同源tab页即可实现sessionStorage的有效共享。
第二种方法是通过window.addEventListener('storage', () => {})事件监听，来进行同源跨tab页的数据共享，第二种方法将在后面的篇幅详细介绍。

关于Chrome中的sessionStorage

这个问题事实上在本人接手此项目不久后就有一定的预感会爆发。原因呢，就在于接手项目后在梳理项目代码，及开发新需求的过程中发现其对于新开tab的操作中会使用旧tab页中的sessionStorage。当时就感觉到奇怪，sessionStorage对于这种新开的tab页应该是不共享的才对，但是系统又确实正常运行着的。于是打开MDN对sessionStorage进行了再次确认：

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

鉴于其中的第二点于是做了几次实验：

1. 通过新建标签页复制打开对应URL页面，情况属于第三条，创建独立sessionStorage。
2. 通过window.open()打开新标签页，共享了原tab页中的sessionStorage。
3. 通过a标签的_blank方式打开新tab页，Chrome浏览器共享了sess