sessionStorage跨标签取值

╰+哭是因爲堅強的太久メ 2021-09-18 17:28 390阅读 0赞

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

答： ...

***先看MDN文档***

**sessionStorage**

![20190403223837619.png][]

**localStorage**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70][]

*通过开发者文档可以看出，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][https_www.tuicool.com_articles_UZrUnmq]

[20190403223837619.png]: /images/20210812/afeefa55123046ee907a9accd9807a8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70]: /images/20210812/a7db899852314adebcca00ebf4b4df6d.png
[https_www.tuicool.com_articles_UZrUnmq]: https://www.tuicool.com/articles/UZrUnmq