码迷,mamicode.com
首页 > 其他好文 > 详细

利用localStorage事件来跨标签页共享sessionStorage

时间:2017-08-03 16:52:06      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:set   打开   val   item   get   ons   key   event   color   

//干货 利用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 = window.sessionStorage.getItem("UserData");
            var sessionData = {
                "UserData": userData
            };

            // 已存在的标签页会收到这个事件
            window.localStorage.setItem(sessionStorage, JSON.stringify(sessionData));
            window.localStorage.removeItem(sessionStorage);
        } else if(event.key ==sessionStorage) {
            // 新开启的标签页会收到这个事件
            var data =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

标签:set   打开   val   item   get   ons   key   event   color   

原文地址:http://www.cnblogs.com/hqb-blog/p/7280244.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!