cookie 详解

Mar 11 2016 前端

前言:

  • Cookie是指web浏览器存储的少量数据,它与具体的web站点相关。Cookie数据会自动在浏览器和服务器之间传输,因此服务器端也可以读写存储在客户端的Cookie值。在JavaScript中,Cookie用于保存状态,以及为浏览器提供一种身份识别机制。
  • 检测Cookie是否可用:navigator.cookieEnabled

Cookie的有效期和作用域

  Cookie默认的有效期很短暂,只能持续在浏览器的会话期间。如果想要延长Cookie的有效期,可以通过设置max-age属性。
  Cookie的作用域和localStorage类似,也是通过文档源和文档路径来确定。默认情况下,Cookie对于创建它的页面,以及与该页面同目录或子目录下的其他web页面可见。可以通过设置Cookie的path属性来修改Cookie的作用域,如果把path设为“/”,就等同于让Cookie拥有了localStorage的作用域,即整个文档源。
  Cookie的作用域默认限制在文档源之内,如果想实现同一服务器之下不同子域的跨域访问Cookie,如a.example.com想访问b.example.com设置的Cookie,这时候就可以通过设置Cookie的domain属性来实现。在a.example.com下的一个页面设置了Cookie,将其path设为“/”,并将domain设为“.example.com”,这样该Cookie就对example.com域下的所有页面可见。
  同时要注意的是,Cookie的domain只能设置为当前服务器的域。如想实现Cookie在不同父域下的跨域访问,可参考其他跨域方式,如script标签、隐藏iframe等。

创建和存储Cookie

对Cookie的所有操作都要通过读写document对象的Cookie属性来完成。Cookie的值都是以键值对的形式存储。

//创建一个名字Cookie,同时设置它的过期时间
function setCookie(c_name,value,expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
//encodeURIComponent() 对 URI 进行编码
document.cookie=c_name+ "=" +encodeURIComponent(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

同样的,如果要设置path、domain等属性,只须以如下形式追加到Cookie值的后面: 
  ;path=path

读取Cookie

使用document.cookie可以获取到Cookie的值,不过这个值是一个字符串,为了更好地查看Cookie的值,往往会采用split()方法将Cookie中的名值对分离出来。

function getCookie() {
// 初始化要返回的对象
var cookie = {};
var all = document.cookie;
if (all === null) {
return cookie;
}
//分离出Cookie的各个属性
var list = all.split(';');
for (var i = 0; i < list.length; i++) {
// 查询出等号所在的位置
var p = list[i].indexOf('=');
// 分离出名字和值
var name = list[i].substring(0, p);
var value = list[i].substring(p + 1);
//对值进行解码
value = decodeURIComponent(value);
// 将名值对存储到对象中
cookie[name] = value;
}
return cookie;
}

Cookie的局限性

  1. Cookie只能存储少量的数据,每个Cookie的大小不超过4KB。RFC标准不允许浏览器保存超过300个Cookie,为每个web服务器保存的Cookie数不超过20个。
  2. JavaScript中使用Cookie不会采用任何加密机制,因此它们是不安全的。

JavaScript