sessionStorage跨标签取值

需求：当打开一个项目地址，写入sessionStorage之后，再打开一个tab页，取不到sessionStorage；why？怎么才能取到？

答： ...

先看MDN文档

sessionStorage

localStorage

通过开发者文档可以看出，localStorage可以跨标签，但是sessionStorage不可以跨标签，因为sessionStorage是基于会话级别的存储，那么我又想去拿到sessionStorage，怎么办呢？请往下看。。。

直接上代码

/**
 * 原理：利用同源页面-storage的监听事件
 * 《h5移动web开发指南》当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件，就会触发
 */
  ;(function () {
    //当前页面没有sessionStorage【当开启了一个新的tab页是触发】
    if (!sessionStorage.length) {
      localStorage.setItem('getSessionStorage', Date.now());
    };
    //监听storage事件
    window.addEventListener('storage', function (event) {
      /*
        1、目的：触发原页面在localStorage存一下sessionStorage，向其它的tab的页面发送一个信号，触发下面那个key='sessionStorage'的分支
        2、解释：在原来的页面就会触发事件，将sessionStorage存入localStorage，为了触发storage监听，然后清除localStorage，不留痕迹，也就一瞬间的事情
      */
      if (event.key == 'getSessionStorage') {
        // Some tab asked for the sessionStorage -> send it
        console.log(sessionStorage)
        localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
        localStorage.removeItem('sessionStorage');

      } else
      /*
        1、目的：在tabs页面中通过上面的触发，接受sessionStorage的参数
        2、解释：storage监听到key = sessionStorage的取出存入的sessionStorage，循环存入新的标签
      */
      if (event.key == 'sessionStorage' && !sessionStorage.length) {
        // sessionStorage is empty -> fill it

        var data = JSON.parse(event.newValue),
          value;
        console.log('data',data)
        for (let key in data) {
          sessionStorage.setItem(key, data[key]);
        }
      }
    });
  })();

通过上面这个方式，就可以在新打开的tab页中获取到sessionStorage的值了，只有在新开的tab才有值，当已经打开了Atab，Btab,然后在Atab写入sessionStorage，这样Btab是获取不到的，即使刷新也不行，这就是有得必有失吧！！！目前还没有想到好的处理方法！！！

参考:https://www.tuicool.com/articles/UZrUnmq