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

问题：项目使用sessionStorage存储已登录用户的token和用户信息，当右键新打开标签页时，sessionStorage为空，需重新登录。

需求：浏览器关闭时，清空用户所有登录信息，下次打开浏览器需重新登录。

方法：我们将token保存在sessionStorage，并在每次请求服务器时将token放在请求头中来完成用户的身份认证。当用户关闭标签页，token会立即过期。

问题来了，多标签应该怎么办呢？

利用localStorage事件来跨标签页共享sessionStorage。
当用户新开一个标签页时，我们先来询问其它已经打开的标签页是不是有需要给我们共享的sessionStorage数据。如果有，现有的标签页会通过localStorage事件来传递数据到新打开的标签页中，我们只需要复制一份到本地sessionStorage即可。
传递过来的sessionStorage绝对不会保存在localStorage，从localStorage事件将数据中复制并保存到sessionStorage，这个流程是在同一个调用中完成，没有中间状态。而且数据是对应事件携带的，并不在localStorage中。

代码实例

(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) {
            // 新开启的标签页会收到这个事件
            var data = JSON.parse(event.newValue),
                    value;

            for (key in data) {
                sessionStorage.setItem(key, data[key]);
            }
        }
    });
})();

转载自：https://blog.csdn.net/qq_43634982/article/details/103509463