cookie的使用

1.什么是 Cookie?

1. Cookie 就是浏览器储存在用户电脑上的一小段文本文件
2. Cookie 是纯文本格式，不包含任何可执行的代码
3. Cookie 由键值对构成，由分号和空格隔开
4. Cookie 虽然是存储在浏览器，但是通常由服务器端进行设置
5. Cookie 的大小限制在 4kb 左右，每个域名下的cookie数量最多为20个（但很多浏览器厂商在具体实现时支持大于20个）

2.cookie的读、写、删

//写
document.cookie="name=value; expires=Thu, 26 Feb 2116 :50:25 GMT; domain=sankuai.com; path=/; secure"

//读
console.log(document.cookie)

//删（只要将这个cookie的expires 选项设置为一个过去的时间点就行了或者max-age=0）
 document.cookie="name=value; max-age=0"

注：设置多个cookie没法简写，只能写多个document.cookie

3.cookie的属性

每个cookie 都有一定的属性，如什么时候失效，要发送到哪个域名，哪个路径等等。在设置任一个cookie 时都可以设置相关的这些属性，当然也可以不设置，这时会使用这些属性的默认值。

expires

• 用来设置cookie失效日期,即什么时候失效，默认在浏览器关闭就失效了（会话cookie）
• 必须是 GMT 格式的时间。如expires=Thu, 25 Feb 2016 04:18:00 GMT表示cookie在2016年2月25日4:18分之后失效
• 当cookie 的失效时刻到了之后，浏览器会清除该cookie，通过 document.cookie 就访问不到这个 Cookie 了，当然以后发送请求也不会再带上这个失效的 Cookie 了。

max-age

• expires 是 http1.0协议中的选项，在新的http1.1协议中expires已经由 max-age 选项代替，两者的作用都是限制cookie 的有效时间。
• expires的值是一个时间点（cookie失效时刻= expires），而max-age 的值是一个以毫秒为单位时间段（cookie失效时刻= 创建时刻+ max-age）。如maxAge=1000,表示cookie从创建到1s后失效
• max-age 的默认值是 -1(即会话cookie)；若max-age有三种可能值：负数、0、正数。负数：会话cookie；0：删除cookie；正数：有效期为创建时刻+ max-age
• 如果同时设置了 max-age 和 expires，以 max-age 的时间为准。

domain和path

• domain（域名） 和 path（路径） 两个选项共同决定了 Cookie 所在的路径，例如一个url www.baidu.com/aa,域名是（www.baidu.com）,aa是路径
• 如果没有设置这两个选项，则会使用默认值。domain 的默认值为设置该 Cookie 的网页所在的域名，path 默认值为设置该 Cookie 的网页所在的目录。

secure

• secure 选项用来设置 cookie 只在确保安全的请求中才会发送。若存在，当请求是 HTTPS 或者其他安全协议时，包含 secure 选项的 Cookie 才能被保存到浏览器或者发送至服务器。
• 默认情况下，cookie不会带secure选项(即为空)。所以默认情况下，不管是 HTTPS 协议还是 HTTP 协议的请求，Cookie 都会被发送至服务端。

httpOnly

• 这个选项用来设置cookie是否能通过 js 去访问。
• 默认情况下，cookie不会带httpOnly选项(即为空)，所以默认情况下，客户端是可以通过js代码去访问（包括读取、修改、删除等）这个cookie的。当cookie带httpOnly选项时，客户端则无法通过js代码去访问（包括读取、修改、删除等）这个cookie，在控制台凡是httpOnly类型的cookie，其 HTTP 一列都会打上√。
• 在客户端是不能通过document.cookie来设置httpOnly，所以客户端设置的cookie都可以使用document.cookie来获取只有服务端可以设置。

4.cookie的作用域和作用路径

1.作用域（domain属性）

作用域，即cookie的作用范围，要了解作用域，需要先了解什么是域名，具体可以看这篇文章

举个例子：news.163.com 和 sports.163.com 是子域，163.com 是父域。

• 当 Cookie 的 domain 为 news.163.com，那么只有访问 news.163.com 的时候会带上 Cookie；

• 当 Cookie 的 domain 为 163.com或者.163.com，那么访问 news.163.com 和 sports.163.com 都会带上 Cookie

• 即子域名可以访问父域名cookie，反之不行

2.作用路径（path属性）

举个例子：

www.163.com/parent 
www.163.com/parent/childA 
www.163.com/parent/childB

• 当 Cookie 的 domain 为 /childA时候，只有访问路径为/childA会带上cookie
• 当 Cookie 的 domain 为 /parent时候，访问/parent/childA 或者/parent/childB 都会带上cookie
• 即子路径可以访问父路径cookie，反之不行

注：在有效的作用域和作用路径下，下面三种情况都是有效的

1. 访问时会自动带上cookie
2. 浏览器控制台可以看见cookie
3. 使用js读写cookie

5.cookie 编码

cookie其实是个字符串，但这个字符串中逗号、分号、空格、中文被当做了特殊符号。所以当cookie的 key 和 value 中含有这几种特殊字符时，需要对其进行额外编码,具体编码方式可戳这 前端常用的url编码方式。

var key = encodeURIComponent("a测试;b");
var value = encodeURIComponent("this 值is a value contain , and ;");
document.cookie= key + "=" + value + ";"
console.log('key值：'+document.cookie.split('=')[0])
console.log('key值：'+decodeURIComponent(document.cookie.split('=')[0]))
//key值：name%E6%B5%8B%E8%AF%95%3Bvalue
//key值：name测试;value

参考文章

Cookie 在前端中的实践

聊一聊 cookie