(转)如何实现同一浏览器多个标签页之间的通信(二)——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