如何实现同一浏览器多个标签页之间的通信（二）—

二、cookie
（1）cookie是什么？
HTTP Cookie，通常直接叫做cookie，最初是在客户端用于存储回话信息的。该标准要求服务器对任意HTTP请求发送Set-Cookie HTTP头作为响应的一部分，其中包含回话信息。浏览器会存储这样的回话信息，并在这之后，通过每个请求添加Cookie HTTP头将信息发回服务器。
（2）cookie怎么用？
在JavaScript中，cookie的接口即document.cookie不太友好，可以自己封装相应的接口。
基本cookie操作：读取、写入、删除

js javascript">js-comment">//代码来源于JavaScript高级程序设计
js-keyword">var CookieUtil={
            get:js-function">js-keyword">functionjs-params">(name){
                js-keyword">var cookieName=js-built_in">encodeURIComponent(name)+js-string">"=",
                    cookieStart=document.cookie.indexOf(cookieName),
                    cookieValue=js-literal">null;
                js-keyword">if(cookieStart>-js-number">1){
                    js-keyword">var cookieEnd=document.cookie.indexOf(js-string">";",cookieStart);
                    js-keyword">if(cookieEnd==-js-number">1){
                        cookieEnd=document.cookie.length;
                    }
                    cookieValue=js-built_in">decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
                }
                js-keyword">return cookieValue;
            },
            set:js-function">js-keyword">functionjs-params">(name,value,expires,path,domain,secure){js-comment">//cookie的构成：名称、值、失效时间（何时应停止向浏览器发送cookie）、路径（向服务器发送cookie的特定域的路径）、域（cookie对于哪个域是有效的）、安全标志（指定后只能在使用SSL连接时才发送到服务器）
                js-keyword">var cookieText=js-built_in">encodeURIComponent(name) + js-string">"=" +js-built_in">encodeURIComponent(value);
                js-keyword">if(expires js-keyword">instanceof js-built_in">Date){
                    cookieText += js-string">"; expires="+expires.toGMTString();js-comment">//时间为GMT格式，注意信息之间用“; ”分割
                }
                js-keyword">if(path){
                    cookieText += js-string">"; path="+path;
                }
                js-keyword">if(domain){
                    cookieText += js-string">"; domain="+domain;
                }
                js-keyword">if(secure){
                    cookieText += js-string">"; secure";
                }

                document.cookie = cookieText;
            },
            unset:js-function">js-keyword">functionjs-params">(name,path,domain,secure){js-comment">//没有直接删除cookie的方法
                js-keyword">this.set(name,js-string">"",js-keyword">new js-built_in">Date(js-number">0),path,domain,secure);js-comment">//使用相同路径、域、安全选项再次设置cookie，并将失效时间设置为过去的时间
            }
        };

使用：

js cs">        js-comment">//设置cookie
        CookieUtil.js-keyword">set(js-string">"name",js-string">'lwf');
        CookieUtil.js-keyword">set(js-string">"age",js-number">21);

        js-comment">// 读取cookie
        console.log(CookieUtil.js-keyword">get(js-string">"name"));
        console.log(CookieUtil.js-keyword">get(js-string">"age"));

        js-comment">// 删除cookie
        CookieUtil.unset(js-string">"name");
        CookieUtil.unset(js-string">"age");

（3）怎么使用cookie实现多标签之间的通信？
index.html

js xml"> js-tag"><js-title">input js-attribute">type=js-value">"text">
 js-tag"><js-title">button js-attribute">id=js-value">"btn">Clickjs-tag"></js-title">button>
    js-tag"><js-title">script>
        window.onload=js-function">js-keyword">functionjs-params">(){
            js-keyword">var oBtn=document.getElementById(js-string">"btn");
            js-keyword">var oInput=document.getElementsByTagName(js-string">"input")[js-number">0];
            oBtn.onclick=js-function">js-keyword">functionjs-params">(){
                js-keyword">var val=oInput.value;
               CookieUtil.set(js-string">"name",val);
               console.log(CookieUtil.get(js-string">"name"));
            } 
            js-keyword">var cookieUtil={js-comment">//...}
        }
    <script>

test.html

js javascript">window.onload=js-function">js-keyword">functionjs-params">(){
            js-keyword">var  getCookie  = js-function">js-keyword">functionjs-params">( keyName){
                js-keyword">var items = [] , json = {};
                js-keyword">var cookie = document.cookie;
                js-keyword">if( cookie.length > js-number">0 ){
                    items = cookie.split(js-string">';');
                    js-keyword">for(js-keyword">var i = js-number">0;i < items.length;i++){
                        json[items[i].split(js-string">'=')[js-number">0]] = items[i].split(js-string">'=')[js-number">1] ;
                    }
                    js-keyword">return js-built_in">unescape(json[keyName]);    
                }js-keyword">else{
                    js-keyword">return js-string">'';
                }
            }

            setInterval(js-function">js-keyword">functionjs-params">(){    
                console.log(js-string">"name=" + getCookie(js-string">"name"));    
            }, js-number">10000);    
        };

效果：
这里写图片描述
4、cookie能实现同一浏览器多个标签页之间通信的原理
cookie的path：一个页面产生的cookie只能被与这个页面的同一目录或者其他子目录下的页面访问。因此，通常把cookie的path设置为一个更高级别的目录，从而使更多的页面共享cookie，实现多页面之间相互通信。
补充：
path：cookie所在的目录，默认为/，即根目录，通常用来解决同域下cookie的访问问题
domain ：cookie所在的域，默认为请求的地址，通过设置document.domain可以实现跨域访问
其他解决方案：如何实现同一浏览器多个标签页之间的通信（一）——localStorage