浏览器的多个选项卡中共享sessionStorage

原文：Sharing sessionStorage between tabs for secure multi-tab authentication

使用场景

在web项目中，当用户重开一个标签页的时候，需要重新登录。造成这种情况的是登录的标识符存取在session中，标签页之间没有共享session数据。

解决方式

发现国外开发者解决的方式是监听storage事件，利用localStorage事件来跨标签页共享sessionStorage。
在线例子

// Removed IE support in this demo for the sake of simplicity
// 移除对IE浏览器的支持

(function () {

  if (!sessionStorage.length) {
    // Ask other tabs for session storage
    // 新开的标签页触发这个事件
    
    localStorage.setItem('getSessionStorage', Date.now());
  };

  window.addEventListener('storage', function (event) {

    //console.log('storage event', event);
    
    if (event.key == 'getSessionStorage') {
      // Some tab asked for the sessionStorage -> send it
      // 已存在的标签页会接收到这个事件
      
      localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
      localStorage.removeItem('sessionStorage');

    } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
      // sessionStorage is empty -> fill it
      // 新开启的标签页会收到这个事件
      
      var data = JSON.parse(event.newValue), value;

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

      showSessionStorage();
    }
  });