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

迈不过友情╰ 2022-05-26 00:17 436阅读 0赞

二、cookie  
（1）cookie是什么？  
HTTP Cookie，通常直接叫做cookie，最初是**在客户端用于存储回话信息的**。该标准**要求服务器对任意HTTP请求发送`Set-Cookie` HTTP头作为响应的一部分**，其中包含回话信息。浏览器会存储这样的回话信息，并在这之后，**通过每个请求添加`Cookie` HTTP头将信息发回服务器。**  
（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，并将失效时间设置为过去的时间
                }
            };

使用：

//设置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");

（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>

test.html

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

[70]: /images/20220526/ab8ee6d38d5f4df08bfeb240226a33ee.png
[localStorage]: https://blog.csdn.net/liwenfei123/article/details/79996161