最近在项目遇到了一些cookie的坑， 所以整体的总结一下cookie
cookie和前端爱恨纠缠
1
| 在前端提到cookie，首先想到本地存储、最大4k、同源策略，然后呢？？？， cookie到底是什么呢?
|
接下来让我们一起去探究cookie
一 、 获取cookie
1
2
3
| 通过 document.cookie 我们可以获取到cookie的内容，那我们获取到的cookie内容是什么样的呢？？？
如图所示： 我们获取到的cookie是所有cookie的一个字符串结合
|
二 、 设置cookie
1
2
3
4
| 设置cookie也是通过 document.cookie 来完成
// 通过document.cookie设值时， 只能设置一个cookie的值
document.cookie='myname=laihuamin;path=/;domain=.baidu.com';
|
三、 在浏览器中查看cookie
四、 cookie的属性构成
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| 1. name (cookie的名称)
一个唯一确定cookie的名称，cookie的名字一般都是经过encodeURIComponent编码后在进行设置，这样避免产生问题
2. value (cookie的值)
存储在cookie中的字符串值，一般都是经过encodeURIComponent编码后在进行设置，这样避免产生问题
3. domain (cookie生效的域)
cookie也是遵循同源策略的， 所以cookie的作用范围，只能是当前设置cookie的域以及它的子域，如果设置cookie时没有设置域名，那个默认是设置cookie时的当前域名
4. path (cookie匹配域的路径)
path这个属性默认是'/'，这个值匹配的是web的路由，举个例子：
比如： www.baidu.com/blog
就是匹配到 www.baidu.com/blog 或者 www.baidu.com/blogaa 或者 www.baidu.com/blogbb
5. cookie 有效期
session : 表示cookie由浏览器默认存储，当浏览器关闭的时候自动删除cookie
Expires: 表示一个未来的时间点，表示cookie到期的时间点
Max-Age: 以秒为单位, 表示cookie的有效时长， 因为失效的cookie会被浏览器自动清除， 所以当Max-Age为0时，就表示删除cookie
6. secure
这是设置cookie安全的属性，当这个属性设置为true时，此cookie只会在https和ssl等安全协议下传输
7. HttpOnly 值为boolean
HttpOnly属性只能由服务端设置, HttpOnly设置为true后，前端不能通过js获取和设置cookie, 能有效的防止xss攻击
|
cookie和服务端的缘分
一、服务端设置cookie
1
2
| 1. 服务端通过响应头上的Set-Cookie属性给客户端设置cookie， 如果要设置多个cookie，需要多写几个Set-Cookie
|
如图：
v1.5.2