在浏览器的多个tab页中共享sessionStorage

缪运泽 6月 21, 2017

注册storage事件
通过localStorage.setItem执行storage中的函数
编写storage事件函数

在浏览器中的多个tab页中共享数据，可以通过cookie或localStorage实现。
某些情况下，需要在浏览器关闭后即清除该数据，可以通过sessionStorage完成。
但sessionStorage仅保存在当前tab页中，想要在多个tab中共享该数据，可通过localStorage实现。

注册storage事件

当localStorage的值发生变化时，页面会监听到”stroage”事件：

window.addEventListener("storage", function(event){
  if(!event.newValue){
    reutrn;
  }
  if(event.key == "getSession"){
    localStorage.setItem("storeSessionData", sessionStorage.getItem("sessionValue"));
    localStorage.removeItem("storeSessionData");
  }
  ...
});

在该函数中，当 localStorage 中 key 为 getSession 的内容发生变化时会调用该函数，函数中有一个 event 对象，该event的属性 key 为 localStorage改变内容的key(这里为getSession) , 另一个属性 newValue 存储着 localStorage中key对应的内容 ，利用该方式可完成sessionStorage在tab间的共享

通过localStorage.setItem执行storage中的函数

在新打开的tab中，首先检查session的值是否存在，若不存在，则执行：

if(!sessionStorage.getItem("sessionValue")){
  localStorage.setItem("getSession", Date.now());
}

编写storage事件函数

window.addEventListener("storage", function(event){
  ...
  if(event.key == "getSession"){
    localStorage.setItem("storeSessionData", sessionStorage.getItem("sessionValue"));
    localStorage.removeItem("storeSessionData");
  }
  if(event.key == "storeSessionData"){
    sessionStorage.setItem("sessionValue", event.newValue);
    $("#session-data-panel").text("Session: " + sessionStorage.getItem("sessionValue"));
    localStorage.removeItem("getSession");
  }
  ...
});

新建tab页中执行localStorage.setItem("getSession", Date.now());会导致其他tab页进入第一个if，执行

localStorage.setItem("storeSessionData", sessionStorage.getItem("sessionValue"));
localStorage.removeItem("storeSessionData");

在其他tab执行完第一行代码后，会激活新打开的tab开始执行”storage”事件回调函数中的第二个if，执行sessionStorage.setItem，获取其他tab中sessionStorage存储的值(event.newValue)。
类似的，当某个tab中的sessionStorage的内容被修改时，同样可利用localStorage完成sessionStorage与其他tab的同步。

在线Demo
在Demo中可以看到，页面初始的session为空，点击按钮产生一个内容为随机数的session，再在新的页面中打开该地址，两个tab间的session内容是同步的。

示例代码：

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
  $().ready(function(){
    if(!sessionStorage.getItem("sessionValue")){
      localStorage.setItem("getSession", Date.now());
    }else{
      $("#session-data-panel").text("Session: " + sessionStorage.getItem("sessionValue"));
    }

    window.addEventListener("storage", function(event){
      if(!event.newValue){
        return ;
      }
      if(event.key == "getSession"){
        localStorage.setItem("storeSessionData", sessionStorage.getItem("sessionValue"));
        localStorage.removeItem("storeSessionData");
      }
      if(event.key == "storeSessionData"){
        sessionStorage.setItem("sessionValue", event.newValue);
        $("#session-data-panel").text("Session: " + sessionStorage.getItem("sessionValue"));
        localStorage.removeItem("getSession");
      }
      if(event.key == "updateSession"){
        sessionStorage.setItem("sessionValue", event.newValue);
        $("#session-data-panel").text("Session: " + sessionStorage.getItem("sessionValue"));
        localStorage.removeItem("updateSession");
      }
    });

    $("#create-session-btn").click(function(){
      var t = Math.random() * 100;            
      sessionStorage.setItem("sessionValue", t);
      $("#session-data-panel").text("Session: " + t);
      localStorage.setItem("updateSession", t);
    });
  });
</script>
<body>
  <div id="session-data-panel">Session: No Session</div>
  <button id="create-session-btn">Click create a random session</button>
</body>

参考链接：