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

0 217
玩世不恭 2017-11-29发布
签名:欢迎访问徕问社区!

在浏览器中的多个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(https://codepen.io/19920612/full/LLyqvP/) 


在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>


打赏我,让我更有动力~

收藏   0 | Support  0 | Against  0
Login | Register Can Publish Content

精美音乐推荐

最近热帖
window + php 安装redis扩展 0
返回顶部