美文网首页
解决不同标签页sessionStorage不共享的问题

解决不同标签页sessionStorage不共享的问题

作者: 海豚先生的博客 | 来源:发表于2022-10-31 17:28 被阅读0次
    • 将本代码引入html或者main.js中即可
    // 我们假设A页面是已打开标签页,B页面是新打开的标签页(需要同步A页面sessionStorage数据)
    (function(){
        if (!sessionStorage.length) {
            // (1)B页面会进入该逻辑块,调用localStorage的setItem方法,会触发A页面的storage事件。
            localStorage.setItem('getSessionStorage', Date.now());
        };
    
        // storage事件只有localStorage的方法可以触发,必须是同域下一个以上的标签页才能触发该事件。
        window.addEventListener('storage', function(event) {
             if (event.key == 'getSessionStorage') {
                 // (2)A页面会进入该逻辑,将sessionStorage存起来,并触发B页面的storage事件。
                localStorage.setItem('sessionStorage', JSON.stringify(window.sessionStorage));
                // (4)删除临时存放的sessionStorage数据
                localStorage.removeItem('sessionStorage');
    
            } 
            if (event.key == 'sessionStorage' && !sessionStorage.length) {
                // (3)B页面会进入该逻辑块,取出传递过来的数据并存储在当前页面的sessionStorage
                const data = JSON.parse(event.newValue);
                for (key in data) {
                    window.sessionStorage.setItem(key, data[key]);
                }
            }
        });
    })();
    

    相关文章

      网友评论

          本文标题:解决不同标签页sessionStorage不共享的问题

          本文链接:https://www.haomeiwen.com/subject/uuzrtdtx.html