与我们合作
我们专注：网站策划设计、网络多媒体传播、网站优化及网站营销、品牌策略与设计
主营业务：网站建设、移动端微信小程序开发、VI设计、网络运营、云产品·运维解决方案
有一个品牌项目想和我们谈谈吗?
您可以填写右边的表格，让我们了解您的项目需求，这是一个良好的开始，我们将会尽快与您取得联系。当然也欢迎您给我们写信或是打电话，让我们听到您的声音
您也可通过下列途径与我们取得联系：
地 址: 深圳.龙岗区大运软件小镇11栋3楼
电 话: 138 2888 4598 / 138 0880 9053
网 址: http://www.appvx.cn
快速提交您的需求 ↓
在浏览器中的多个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>
关注深正互联，和专业程序员一起学习更多更精彩的程序知识吧~
本站文章均为深正网站建设摘自权威资料，书籍，或网络原创文章，如有版权纠纷或者违规问题，请即刻联系我们删除，我们欢迎您分享，引用和转载，但谢绝直接搬砖和抄袭！感谢...
