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

二、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

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);
        };  

效果:

(4)cookie能实现同一浏览器多个标签页之间通信的原理

cookie的path:一个页面产生的cookie只能被与这个页面的同一目录或者其他子目录下的页面访问。因此,通常把cookie的path设置为一个更高级别的目录,从而使更多的页面共享cookie,实现多页面之间相互通信。

补充:

path:cookie所在的目录,默认为/,即根目录, 通常用来解决同域下cookie的访问问题

domain :cookie所在的域,默认为请求的地址,通过设置document.domain可以实现跨域访问

其他解决方案:如何实现同一浏览器多个标签页之间的通信(一)——localStorage

原文地址:https://www.cnblogs.com/studysuper/p/9949798.html

时间: 2024-10-10 13:20:34

(转)如何实现同一浏览器多个标签页之间的通信(二)——cookie+setInterval的相关文章

浅谈两种方法实现浏览器内多个标签页之间的通信

调用localstorge.cookies等本地存储方式. 方法一: localstorge在一个标签页里被添加.修改或删除时,都会触发一个storage事件,通过在另一个标签页里监听storage事件,即可得到localstorge存储的值,实现不同标签页之间的通信. <input id="name"> <input type="button" id="btn" value="提交"> <scr

利用cookie实现浏览器中多个标签页之间的通信

原理: cookie是浏览器端的存储容器,而且它是多页面共享的,利用cookie多页面共享的特性,可以实现多个标签页的通信. 比如: 一个标签页发送消息(将发送的消息设置到cookie中),一个标签页接收消息(从cookie中获取消息) 例子:   01 发送消息的标签页(其实就是将要发送的消息设置到cookie中) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

如何实现浏览器内多个标签页之间的通信?

调用 localstorge.cookies 等本地存储方式 方法一:使用localStorage 使用localStorage.setItem(key,value);添加内容 使用storage事件监听添加.修改.删除的动作 window.addEventListener("storage",function(event){      $("#name").val(event.key+"="+event.newValue); }); 方法二.使

在jsp中同一页面中多个标签页之间切换数据展示

示例图片: 像这样的上面多个tab页下面也有多个tab页面,其实只要学会一个嵌套就可以了,现在就说一下简单的一个页面的多个tab页面的展示

infinity新标签页失效

安装infinity新标签页后,无法生效,或者infinity新标签页突然失效了. 驱动精灵的问题 驱动精灵安装后,还会安装其它的软件,在卸载后,安装的软件还存在. 解决办法 光卸载驱动精灵还不够,还有货: kbasesrv 也要卸载,还有个 infocenter.exe , 甚至我把所有的 kingsoft 文件夹都删除了,这下就正常了. 我的帖子:infinity新标签页无法替换九宫格新标签页 不要再安装驱动精灵 再次吐嘈,驱动精灵的卸载真是百般不想让你卸载,各种弹出二次确认,还把卸载做成文

小结一下,登录如何判断不同标签页登录两个账号的问题

今天无意中作出了,检测两个标签页登录两个账号的方法: 是这样的,这个项目,如果多账号登录的话,会出现一些古怪的现象,两个账号的个人信息不一样,支付订单信息却是一样的,同步的,这很可怕, 出现这样的原因是,代码不够规范,后端有用session来判断是不是同一个人的,也有的接口是根据userid来获取信息的,我将一些项目的配置信息存在了vuex中,并将vuex中的state值在刷新前都会在localStorage中存一份,放置刷新页面后vuex中的值丢失.(这个是一个小突破,但不是今天的重点). 问

IE浏览器下a标签嵌套img标签默认带有边框

最近写在线主页时发现IE浏览器下a标签嵌套img标签默认带有边框: 解决办法:img{border:0 none;} 注意,严格意义上0和none都要加上!

为网站设置icon图标用于显示在浏览器标签页最左侧

icon图标,想必大家对它并不陌生吧,在浏览网页时会看到浏览器标签页的最左侧会有一个小图标,这个正是icon图标.本例为大家介绍下如何为网站设置这个图标 这句话起什么作用 ?复制代码 代码如下: <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 图标要存放在网页文件夹根目录中一个,固定位置, 但文件名一定要是favicon.ico不能是别的是定义站

让 IE9 以下的浏览器支持HTML5标签 和 CSS3选择器

做项目的很多时候,想用 HTML5  CSS3 新的技术,又考虑到低版本的浏览器不支持这些标签和属性,就让人烦恼,不过问题的出现,就有问题的解决方案,那么这里就介绍用 js 插件来让低版本浏览器也兼容吧... 让浏览器支持HTML5标签插件下载地址: http://code.google.com/p/html5shiv/ 让浏览器支持CSS3选择器插件下载地址: http://www.jb51.net/jiaoben/24032.html 使用方法: 下载插件,在下载到的文件中找到下面标着红颜色