| 解决右键打开新的标签页，sessionStorage失效。 | 您所在的位置：网站首页 › sessionstorage清除所有选项卡 › 解决右键打开新的标签页，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]); } } }); })(); |
| CopyRight 2018-2019 实验室设备网 版权所有 |