sessionStorage实现多个标签下共享

前言

在之前，保存用户信息大多数都是放在Cookie中，但是安全性太低了，随着Html5的诞生，Web Storage也进入我们的视野，于是存储信息都转入到SessionStorage，今天就分享一下SessionStorage的共享问题!

现有的浏览器存储机制

localStorage：~5MB，数据永久保存直到用户手动删除
sessionStorage：~5MB，数据只在当前标签页有效，当用户关闭浏览器时删除
cookie：~4KB，可以设置成永久有效，当用户关闭浏览器时删除

利用`localStorage`事件来跨标签页共享`sessionStorage`

当用户新开一个标签页时，我们先来询问其它已经打开的标签页是不是有需要给我们共享的sessionStorage数据。如果有，现有的标签页会通过localStorage事件来传递数据到新打开的标签页中，我们只需要复制一份到本地sessionStorage即可。

传递过来的sessionStorage绝对不会保存在localStorage，从localStorage事件将数据中复制并保存到sessionStorage，这个流程是在同一个调用中完成，没有中间状态。而且数据是对应事件携带的，并不在localStorage中。这样就确保了数据的安全性。

新建sharingSession.js

// 为了简单明了删除了对IE的支持
(function() {
    if (!sessionStorage.length) {
        // 这个调用能触发目标事件，从而达到共享数据的目的
        localStorage.setItem('getSessionStorage', Date.now());
    };
    // 该事件是核心,调用监听事件
    window.addEventListener('storage', function(event) {
        if (event.key === 'getSessionStorage') {
            // 已存在的标签页会收到这个事件
            localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
            localStorage.removeItem('sessionStorage');
        } else if (event.key === 'sessionStorage' && !sessionStorage.length) {
            // 新开启的标签页会收到这个事件
            let data = JSON.parse(event.newValue),
                value;
            console.log('addEventListener data', data)
            location.reload()
            for (key in data) {
                sessionStorage.setItem(key, data[key]);
            }
        }
    });
})();

在main.js中引用

1	import sharingSession from "@/utils/sharingSession"

注意事项: 监听 storage 事件并不是同步完成的，可能在你需要的时候获取新的 sessionStorage中的值，可能在监听数据之前是无法获取到的!

代码其实不难理解，当打开新的页面，新页面的sessionStorage.length会空，于是就会调用localStorage.setItem()，其他标签页会判断event.key是否与刚刚保存的key值一致，若一致，说明当前页面不是新的页面，则将页面中的session保存至localStorage，新打开的页面监听到有新的值，就将值通过event.newValue取出后赋给自己的SessionStorage，就实现了SessionStorage的共享。

在事件处理函数中，触发事件的事件对象（event参数值）具有如下几个属性