javascrip cookie

首先要明白一下cookie的概念。由于HTTP协议是一种无状态协议，也就是说一旦server和client的数据交换完成后，他们之间的连接就会被断开。再次交换数据的时候就须要再次建立连接。这就意味着server无法从连接上推断client。

为了解决问题，W3C引入了cookie机制。cookie就好比一个身份证，client请求server的时候。server将这个身份证颁发给client。client（浏览器）将这个身份证保存在本地。当下次连接server时。client携带这个身份证请求server。server依据身份证就可以确定用户身份。

cookie不仅client能訪问到，由于client请求server的时候会将cookie放在请求头里带到server，所以server也能对cookie进行操作。这里讨论使用javascript在client对cookie进行操作的方法。

一、写入cookie

写入cookie主要设置五个字段，内容、有效期、域名、路径、是否安全传输。

内容

cookie是以键值对形式保存的。要新建一个名为name，值为zhangsan的cookie就是“name=zhangsan”，仅仅需将这个cookie赋值给document.cookie就可以：

document.cookie = "name=zhangsan";  //加入cookie

document.cookie有读和写两种形式。上面这个形式便是写形式，写形式代表加入cookie，且一次仅仅能加入一条cookie。要加入多条则须要调用多次。如

document.cookie = "name=zhangsan;age=10"; //无效。仅仅加入了name。忽略age
document.cookie = "age=10";  //加入age

有效期

默认情况下。cookie在关闭浏览器的时候就会被清除。想让cookie存放更长时间能够通过设置expires字段实现。

expires字段须要的值是GMT(格林威治时间)格式的日期型字符串，能够用Date对象得到：

var date = new Date();
//将时间设置成30分钟以后
date.setTime(date.getTime() + 30 * 60 * 1000);
//name=zhangsan将在30分钟后过期
document.cookie = "name=zhangsan;expires="+date.toGMTString();

想调整过期时间，仅仅须要改动setTime一行的代码。

域名

处于安全性的考虑，cookie是具有不可跨域性的。用户訪问百度的时候。百度为client颁发了一个cookie，用户再去訪问谷歌。谷歌给client颁发一个cookie。那么百度和谷歌是不能訪问到彼此的cookie的。

可是一般来说，我们訪问baidu.com的时候会发现，你是能够訪问到map.baidu.com的cookie的，这是由于给cookie设置了domian属性，由于map.baidu.com和baidu.com具有相同的域名baidu.com，所以能够为cookie设置domian值为baidu.com

document.cookie = "name=zhangsan;domain=baidu.com";

路径

相同道理。blog.csdn.net是訪问不到blog.csdn.net/sunhengzhe里面的cookie的（但反过来能够）。为了使上级文件夹訪问到下级文件夹，在blog.csdn.net/sunhengzhe里新建cookie时，能够为cookie设置path属性，一般能够直接将其设置为根文件夹

document.cookie = "name=zhangsan;path=/";

安全传输

cookie是保存在client本地的。所以查看cookie是非常方便，这也暴露了cookie的不安全性，所以一般cookie不存放如password等重要信息，secure属性并非用来设置cookie内容的安全性的，而是用于传输过程中的安全，设置secure后，仅仅保证 cookie 与server之间的传输数据过程加密，而保存在本地的 cookie文件并不加密。所以假设是想让本地保存的cookie也加密的话，最好在保存cookie值的时候就保存加密后的数据。

document.cookie = "name=zhangsan;secure";

二、读取cookie

读取cookie使用到document.cookie的读模式，返回的就是全部的cookie。中间用分号隔开。

document.cookie = "name=zhangsan";  //写
document.cookie = "age=10";  //写
console.log(document.cookie);  //输出 name=zhangsan; age=10

三、删除、改动cookie

cookie并不提供删除、改动的方法，假设想改动某项cookie，仅仅需加入一个同名cookie。新的值将覆盖旧的值。

document.cookie = "name=zhangsan";
document.cookie = "name=lisi";  //name被改动为lisi

要删除cookie，仅仅需将该cookie有效期设置到当前时间曾经就可以。

var date = new Date();
//设置为前一毫秒（多前都能够）
date.setTime(date.getTime() - 1);
//删除name
document.cookie = "name=lisi;expires=" + date.toGMTString();

四、封装操作cookie的方法

使用原生方法对cookie操作是有些麻烦的，我们能够将其封装起来，name代表键名。value代表值，不填则为读取名为name的值。option代表设置值如有效期等。当中有效期单位为天。

function cookie(name, value, options) {
if (typeof value != 'undefined') {
options = options || {};
//假设值为null, 删除cookie
if (value === null) {
value = '';
options = {
expires: -1
};
}
//设置有效期
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toGMTString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = ';expires=' + date.toGMTString();
}
var path = options.path ? ';path=' + (options.path) : '';
var domain = options.domain ? ';domain=' + (options.domain) : '';
var secure = options.secure ? ';secure' : '';
//设置cookie
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else {
//读取cookie
if (document.cookie.length > 0) {
var start = document.cookie.indexOf(name + "=")
if (start != -1) {
start = start + name.length + 1;
var end = document.cookie.indexOf(";", start);
if (end == -1){
end = document.cookie.length;
}
return decodeURIComponent(document.cookie.substring(start, end));
}
}
return ""
}
}

cookie("name", "zhangsan"); //加入name=zhangsan
cookie("name", null); // 删除name
cookie("age", "10", {
expires: 30
}); // 加入age=10且有效期30天