跨tab页sessionStorage共享

[TieMuZhen]

问题

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

解决办法

1、使用window.open()方法打开这个同源tab页即可实现sessionStorage的有效共享。
2、通过window.addEventListener('storage', () => {})事件监听，来进行同源跨tab页的数据共享。

关于Chrome中的sessionStorage

实际测试如下
1、通过新建标签页复制打开对应URL页面，情况属于第三条，创建独立sessionStorage。
2、通过window.open()打开新标签页，共享了原tab页中的sessionStorage。
3、通过a标签的_blank方式打开新tab页，Chrome浏览器共享了sessionStorage而Firefox浏览器并没有共享。

不同的浏览器具有不一样的实现及表现形式。这是一个随时可能爆发的兼容性问题。

代码实现同源跨tab页的数据共享

// 通过自执行函数来确保在新开tab中直接执行
// 方法一：同步已有标签页的sessionStorage数据到新开tab页
(function() {
  // 新打开一个tab标签页并通知其他标签页同步sessionStorage的数据到本标签页
 if (!sessionStorage.length) {
  // 这个调用能触发storage事件，从而达到共享数据的目的
  localStorage.setItem('syncSessionStorage', Date.now());
 };

 // 该事件是核心
 window.addEventListener('storage', function(event) {
  if (event.key == 'syncSessionStorage') {
   // 已存在的标签页会收到这个事件
   localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
   localStorage.removeItem('sessionStorage');

  } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
   // 新开启的标签页会收到这个事件
   var data = JSON.parse(event.newValue);
   for (key in data) {
    sessionStorage.setItem(key, data[key]);
   }
  }
 });
})();