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

实现多个页面之间进行通信

时间:2017-02-20 13:50:19      阅读:762      评论:0      收藏:0      [点我收藏+]

标签:org   时间   内容   console   产生   利用   turn   值传递   int   

使用cookie,使用web worker,使用localeStorage和sessionStorage

cookie,兼容性很好,但是大概4kb.同时,cookie可以永久存在,也可以再回话结束后结束。要就关闭标签页回话立即结束时,不要用cookie,因为它还很有可能会存在一段时间,即使是session-cookie。

  1. 用户在浏览器输入url,发送请求,服务器接受请求
  2. 服务器在响应报文中生成一个Set-Cookie报头,发给客户端
  3. 浏览器取出响应中Set-Cookie中内容,以cookie.txt形式保存在客户端
  4. 如果浏览器继续发送请求,浏览器会在硬盘中找到cookie文件,产生Cookie报头,与HTTP请求一起发送.
  5. 服务器接受含Cookie报头的请求,处理其中的cookie信息,找到对应资源给客户端.
  6. 浏览器每一次请求都会包含已有的cookie.

Sessionstorage:不支持跨标签页共享数据。比如,每次新开启一个标签页都要求用户重新登录。

Localstorage:此处作者用localstorage事件来解决这个问题。思路:当打开一个新的标签页的时候,先询问是否有sessionstorage。如果有,现有标签页通过localstorage事件向新页面传递sessionstorage,新页面获取后设置。

在标签页中有如下代码

(function()
{
    If(!sessionStorage.length)
    {//新打开的标签页,sessionStorage
        localStorage.setItem("getsessionStorage",Date().now);
        //触发storage事件,新旧页面都会监听
        window.addEventListener("storage",add);

        function add(event)
        {
            if(event.key =="getsessionStorage")
            {
                以下操作对已有页面
                localStorage.setItem("sessionStorage",JSON.stringify(sessionStorage));
                localStorage.removeItem("sessionStorage");
            }
            else if(event.key=="sessionStorage"&& !sessionStorage.length){
                var data=JSON.parse(event.newValue);
                for(var key in data){
                    sessionStorage.setItem(key,data[key]);
                }

            }
        }
        ;
    }
})()

 不同的标签页

  方法一

      第一个页面设置cookie

            用document.cookie=”name=”+name;

     第二个页面获得

function getCookie(key) {
    return JSON.parse("{\""+document.cookie.replace(/;\s+/gim,",").replace(/=/gim,":")+"\"}");//g,全局  i忽略大小写 m多行搜索
}
setInterval(getCookie(key),1000);

 方法二

    利用localstorage设值传递。

    localStorage.setItem(key,value);

 

 

 

调用 localstorge、cookies 等本地存储方式

 

方法一:使用localStorage

使用localStorage.setItem(key,value);添加内容

使用storage事件监听添加、修改、删除的动作   

 

 window.addEventListener("storage",function(event){  

          $("#name").val(event.key+”=”+event.newValue);  

  });  

方法二、使用cookie+setInterval  

<inputidinputid="name"><input type="button" id="btnOK"value="发送">  

 

    

$(function(){  

     $("#btnOK").click(function(){  

           varname=$("#name").val();  

           document.cookie="name="+name;  

       });  

  });  

 

//获取Cookie天的内容  

function getKey(key) {  

    return JSON.parse("{\""+ document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") +"\"}")[key];  

}

 //每隔1秒获取Cookie的内容  

setInterval(function(){  

    console.log(getKey("name"));  

 },1000); 

实现多个页面之间进行通信

标签:org   时间   内容   console   产生   利用   turn   值传递   int   

原文地址:http://www.cnblogs.com/sunli0205/p/6418845.html

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