實現多個頁面之間進行通信

使用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);