首页 > 代码库 > 利用localStorage事件来跨标签页共享sessionStorage
利用localStorage事件来跨标签页共享sessionStorage
//干货 利用localStorage事件来跨标签页共享sessionStorage //因为cookie保存字节数量有限,很多童鞋考虑用html5 storage来保存临时数据,Sessionstorage就比较适合来保存临时数据了。 //但有个问题呵:Sessionstorage:不支持跨标签页共享数据,就是说Sessionstorage只在同一个页面内有效,即使用一域名,新打开一个tab窗口,也是不能共享Sessionstorage的。 //那么有没有办法呢,那是有的.... //原理是运用了EventListener的特性 //同源的网页A和B,A页面监听了storage事件,B页面修改localStorage时,A页面才会触发该事件;而A页面做出修改,同样B页面触发了事件 // 下面 EventListener 没对ie作支持,童鞋自行补充 shareSessionStorage: function(){ if(!window.webConfig.useStorage || !window.sessionStorage){ return; } // console.log("useStorage:", webConfig.useStorage); // 该事件是核心 var handel = function(event){ // console.log("event==>", event.key); if(event.key ==‘getSessionStorage‘) { var userData = http://www.mamicode.com/window.sessionStorage.getItem("UserData"); var sessionData =http://www.mamicode.com/ { "UserData": userData }; // 已存在的标签页会收到这个事件 window.localStorage.setItem(‘sessionStorage‘, JSON.stringify(sessionData)); window.localStorage.removeItem(‘sessionStorage‘); } else if(event.key ==‘sessionStorage‘) { // 新开启的标签页会收到这个事件 var data =http://www.mamicode.com/JSON.parse(event.newValue); // console.log("event==>", event.newValue); for (var key in data) { window.sessionStorage.setItem(key, data[key]); } } }; window.removeEventListener("storage", handel); window.addEventListener("storage", handel); // 这个调用能触发目标Global.js storage事件,从而达到共享数据的目的 window.localStorage.setItem(‘getSessionStorage‘, Date.now()); },
利用localStorage事件来跨标签页共享sessionStorage
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。