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：
- /test/page
- /test
- /
再注意
不同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
网友评论