右键打开新的标签页，sessionStorage失效

项目场景：

所有人都知道，localStorage和sessionStorage的最大区别是生命周期，一个永久，一个仅针对一个会话期间有效。那么，到底什么是一个会话？多个标签页之间的数据是否会共享呢？

 

---

问题描述：

在今天开发的项目中，有一个需求，需要在a页面通过target="_blank"跳转打开一个新的标签页b，在跳转的过程中，需要把a页面相关的信息通过缓存传到b页面，通过使用sessionStorage实现，不过在跳转之后发现sessionStorage为空，为什么sessionStorage失效了呢？我的印象中sessionStorage的有效期是在浏览器关闭之前，只要浏览器没有关闭，sessionStorage都是可以使用的。可为什么会出现失效的现象呢？

---

原因分析：

误区：之前一直以为，同一个窗口，只要会话还没有过期，不同标签页之间，相同域名下的sessionStorage是一样的。

正确答案：刷新当前页面，或者通过location.href、window.open、或者通过带target="_blank"的a标签打开新标签，之前的sessionStorage还在，但是如果你是主动打开一个新窗口或者新标签，对不起，打开F12你会发现，sessionStorage空空如也。

也就是说，sessionStorage的session仅限当前标签页或者当前标签页打开的新标签页，通过其它方式新开的窗口或标签不认为是同一个session。

 

---

解决方案：

通过开发者文档可以看出，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是获取不到的，即使刷新也不行，这就是有得必有失吧！！！目前还没有想到好的处理方法！！！
 

更新：

今天又碰到有关sessionStorage的一个问题，发现之前理解的还是错误的，比如当我通过A标签打开新的窗口时，在新窗口删除同样的数据，旧窗口的却还在。

经过测试发现：

通过带target="_blank"的A标签、window.open等方式打开新窗口时，会把旧窗口（或标签）的sessionStorage数据带过去，但从此之后，新窗口（或标签）的sessionStorage的增删改和旧窗口已经没有关系了，如果只是在当前标签内跳转新页面（或者刷新），数据还会保留（前提当然是同域）。

总之，在处理sessionStorage时，只要打开新窗口就要特别注意了，新旧窗口数据不会互相同步。

 

参考链接：http://blog.haoji.me/aboute-session-storage.html