html cookie数据交互,（转）如何实现同一浏览器多个标签页之间的通信（二）——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

Click

window.οnlοad=function(){

var oBtn=document.getElementById("btn");

var oInput=document.getElementsByTagName("input")[0];

oBtn.οnclick=function(){

var val=oInput.value;

CookieUtil.set("name",val);

console.log(CookieUtil.get("name"));

}

var cookieUtil={//...}

}

test,html

window.οnlοad=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