多个页面之间如何进行通信之 cookie 篇

如何解决浏览器多个标签页之间的通信?

使用localeStorage和sessionStorage

cookie

cookie简单理解就是一种可以让服务器在客户端的硬盘或者内存里面存储少量数据,或者说从客户端硬盘读取数据的技术.

cookie的信息是以名/值形式保存,一个名/值仅仅是一条信息

window7是C:\Users\Administrator\Cookies，隐藏文件(.txt).

多用来记录用户的个人信息.毕竟HTTP是无状态的协议.

用户在浏览器输入url,发送请求,服务器接受请求
服务器在响应报文中生成一个Set-Cookie报头,发给客户端
浏览器取出响应中Set-Cookie中内容,以cookie.txt形式保存在客户端
如果浏览器继续发送请求,浏览器会在硬盘中找到cookie文件,产生Cookie报头,与HTTP请求一起发送.
服务器接受含Cookie报头的请求,处理其中的cookie信息,找到对应资源给客户端.
浏览器每一次请求都会包含已有的cookie.

图解基本的cookie知识点

cookie 是有大小限制的
每一个cookie都是合法格式的名值对
cookie是有有效期的(Expires)
cookie有domain域的概念,不同的域是不能进行访问的.可以通过设置document.domain来实现一些跨域.
cookie中的path路径,一个页面产生的cookie只能被与这个页面的同一目录或者是其子目录下的页面访问(同源策略).

cookie的两种形式

短暂性的：浏览器关闭后或者页面关闭后就删除cookie
具有有效期的(设置了有效时间),浏览器关闭依然存在硬盘

js操作cookie
获取cookie

console.log(document.cookie)
//"r_user_id=f7aae2bb-6810-4ec9-b4c7-fbf2fe1e0738; PHPSESSID=web4~7rgfe5mbsjam50en9sujerd085;"

document.cookie='key=value'
//key存在就修改为value,不存在就创建

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

//第一种
function setCookie(c_name, value, expiredays){
 　　　　var exdate=new Date();//生成当天一个时间
　　　　exdate.setDate(exdate.getDate() + expiredays);//获取当天时间的天数+有效期天数
　　　　document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
   //设置cookie
 　　}
//第二种
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}
``
原理都是一样:格式不同.
- 删除cookie(设置有效时间过期)

//删除cookies
function clearCookie(name) {
setCookie(name, “”, -1);
}

//删除cookies
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + “=”+cval+”;expires=”+exp.toGMTString();
}

代码不放在服务器在chrome浏览器下不能处理cookie貌似
 > cookie的路径访问原则
　默认情况下，只有与创建了cookie 的页面在同一个目录或子目录下的网页才可以访问这个cookie.

www.csdn.cn/blog/a.html 创建了cookie

www.csdn.cn/blog/b.html 就可以访问这个cookie页(同一目录)

www.csdn.cn/blog/xyz/c.html 也可以访问这个cookie页(字目录)

www.csdn.cn/xx/d.html 就不可以访问

如何跨域这个障碍呢?
原理:设置cookie到一个更高一级别的目录下(前面那个例子就可以把path='/')

document.cookie = “name=value;expires=date;path=path”

最常用的例子就是让 cookie 在根目录下,这样不管是哪个子页面创建的 cookie，所有的页面都可以访问到了

document.cookie = “key=value;path=/“

> cookie的域
引出这个话题是因为,设置path只能解决同域下的cookie访问问题.不同域的cookie怎么访问?

www.csdn.cn 与 qq.csdn.cn ,如果后者想访问前者的cookie.

就要让www.csdn.cn这么设置

document.cookie = ‘key = value;path=/;domain=csdn.cn’

```

cookie的编码格式

在对cookie设置读取时候记得处理编码问题