2016/07/02
粗略整理一下cookie操作。

是什么

它是服务器发送到浏览器并保存在浏览器中的一块数据，是浏览器的存储数据的一个机制，它随每一次HTTP请求传递至服务器，所以可以用来存储一些验证信息，比如token等。
用脚本可以以生成，也可以访问，它挂在document对象上：

var _cookie = document.cookie

有哪些属性

// 以下演示 cookie 对象有哪些属性
// 这是在浏览器控制台显示的字段名，实际设置的时候全部小写即可
var _cookie = {
  Name, // 键
  Value, // 值
  Domain, // 生效的域名
  Path, // 生效页面路径，相对于 Domain
  Expires/Max-Age, // 生效时间，默认值为 Session
  Size, // 大小，单位 Byte，不特别设置
  HttpOnly, // true 则禁止 JS 读取
  Secure // 是否采用 HTTPS 传输
}

注意点

操作

脚本操作cookie只跟HTML文件位置有关系，与脚本文件从哪里引入无关。

Expires/Max-Age

• 默认值为Session，随着浏览器关闭而删除，注意是浏览器关闭，不是标签页关闭
• 否则，值为Date类型，失效则不随HTTP上传至服务器，而且无法自动删除

Domain

默认值为当前页面所在的域名。

域名

• .com顶级域名
• baidu.com一级域名
• www.baidu.com二级域名
• map.baidu.com二级域名

跨域

百度域名为：www.baidu.com
百度地图域名为：map.baidu.com
百度翻译域名为：fanyi.baidu.com
不同域名下设置的cookie无法相互访问，除非将cookie的属性domain设置为一级域名.baidu.com（注意最前面的点）

Path

为当前HTML文件在服务器的路径。

举个“栗子”

• A --- 网址www.baidu.com/test，在这个HTML页面的脚本中设置的cookie的path属性的值为/test
• B --- 网址www.baidu.com/test/page，在这个HTML页面的脚本中设置的cookie的path属性值为/test/page

B 中脚本只可以读取以下页面中设置的cookie：

1. /test/page
2. /test
3. /

再注意

不同path下可以设置相同名字的cookie。

HttpOnly

这个属性的值一般在服务器设置，设置为true，这样在脚本中无法读取。

Secure

见下文设置。

怎么设置

最简单

在当前页面设置一个名字为token，值为123的cookie：

document.cookie = 'token=123';

设置其他属性

方法就是在上一步的基础上，加上;属性名=属性值：

var d = new Date('2999-01-01');
document.cookie = 'token=123;expires=' + d.toGMTString();

所有属性设置了不正确的值，都会导致cookie不生效。
另外，如果属性值为中文，需要被十六进制的转移序列替换：

var userName = '反恐小柒';
document.cookie = 'username=' + encodeURIComponent(userName);

再另外，secure没有值：

document.cookie = 'token=123;secure';

注意

对同一个名字的cookie设置，后面的值覆盖前面。

怎么获取

// 比如已经设置了两个 cookie
// key1=1
// key2=2
console.log(document.cookie); // key=1; key2=2

注意;号后的空格。

怎么删除

等同你设置这个cookie的代码，只是将expires的值设置为过去的某个时间即可。

资源

详细文档：HTTP cookie
操作库：js-cookie