同一瀏覽器多個標籤頁之間的通信（二）——cookie+setInterval

二、cookie 
（1）cookie是什麼？ 
HTTP Cookie，通常直接叫做cookie，最初是在客戶端用於存儲回話信息的。該標準要求服務器對任意HTTP請求發送Set-CookieHTTP頭作爲相應的一部分，其中包含回話信息。瀏覽器會存儲這樣的回話信息，並在這之後，通過每個請求添加CookieHTTP頭將信息發回服務器。 
（2）cookie怎麼用？ 
在JavaScript中，cookie的接口即document.cookie不太友好，可以自己封裝相應的接口。 
基本cookie操作：讀取、寫入、刪除

//代碼來源於JavaScript高級程序設計
var CookieUtil={
            get:function(name){
                var cookieName=encodeURIComponent(name)+"=",
                    cookieStart=document.cookie.indexOf(cookieName),
                    cookieValue=null;
                if(cookieStart>-1){
                    var cookieEnd=document.cookie.indexOf(";",cookieStart);
                    if(cookieEnd==-1){
                        cookieEnd=document.cookie.length;
                    }
                    cookieValue=decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
                }
                return cookieValue;
            },
            set:function(name,value,expires,path,domain,secure){//cookie的構成：名稱、值、失效時間（何時應停止向瀏覽器發送cookie）、路徑（向服務器發送cookie的特定域的路徑）、域（cookie對於哪個域是有效的）、安全標誌（指定後只能在使用SSL連接時才發送到服務器）
                var cookieText=encodeURIComponent(name) + "=" +encodeURIComponent(value);
                if(expires instanceof Date){
                    cookieText += "; expires="+expires.toGMTString();//時間爲GMT格式，注意信息之間用“; ”分割
                }
                if(path){
                    cookieText += "; path="+path;
                }
                if(domain){
                    cookieText += "; domain="+domain;
                }
                if(secure){
                    cookieText += "; secure";
                }

                document.cookie = cookieText;
            },
            unset:function(name,path,domain,secure){//沒有直接刪除cookie的方法
                this.set(name,"",new Date(0),path,domain,secure);//使用相同路徑、域、安全選項再次設置cookie，並將失效時間設置爲過去的時間
            }
        };

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36

使用：

        //設置cookie
        CookieUtil.set("name",'lwf');
        CookieUtil.set("age",21);

        // 讀取cookie
        console.log(CookieUtil.get("name"));
        console.log(CookieUtil.get("age"));

        // 刪除cookie
        CookieUtil.unset("name");
        CookieUtil.unset("age");

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

（3）怎麼使用cookie實現多標籤之間的通信？ 
index.html

 <input type="text">
 <button id="btn">Click</button>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById("btn");
            var oInput=document.getElementsByTagName("input")[0];
            oBtn.onclick=function(){
                var val=oInput.value;
               CookieUtil.set("name",val);
               console.log(CookieUtil.get("name"));
            } 
            var cookieUtil={//...}
        }
    <script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

test.html

window.onload=function(){
            var  getCookie  = function( keyName){
                var items = [] , json = {};
                var cookie = document.cookie;
                if( cookie.length > 0 ){
                    items = cookie.split(';');
                    for(var i = 0;i < items.length;i++){
                        json[items[i].split('=')[0]] = items[i].split('=')[1] ;
                    }
                    return unescape(json[keyName]);    
                }else{
                    return '';
                }
            }

            setInterval(function(){    
                console.log("name=" + getCookie("name"));    
            }, 10000);    
        };  

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

效果： 
 
4、cookie能實現同一瀏覽器多個標籤頁之間通信的原理 
cookie的path：一個頁面產生的cookie只能被與這個頁面的同一目錄或者其他子目錄下的頁面訪問。因此，通常把cookie的path設置爲一個更高級別的目錄，從而使更多的頁面共享cookie，實現多頁面之間相互通信。 
補充： 
path：cookie所在的目錄，默認爲/，即根目錄， 通常用來解決同域下cookie的訪問問題 

domain ：cookie所在的域，默認爲請求的地址，通多設置document.domain可以實現跨域訪問 

轉自：點擊打開鏈接