cookie详解

cookie

cookie的出现主要是解决http是无保存状态的协议带来的弊端。

cookie原理:

cookie可以通过服务端进行设置，也可以在前端自行设置cookie. 服务端设置cookie时，会将cookie放入到响应请求中，如果要设置多个cookie值时，需要多次Set-Cookie. 设置好的cookie信息会在发送http请求的时候在请求头中携带上Cookie，服务端可以直接从中获取到想要拿到的值，也可以修改cookie的内容。由于cookie会在http请求时携带，所以不能滥用cookie。

cookie属性：

浏览器右键-检查-cookie-选择一个域名下的cookie进行查看即可出现上图。有图可看出，cookie 拥有多个属性，接下来主要介绍一下常用的属性。

name，value

一个域名下绑定的cookie, 当path相同时，name值是不可以重复的。相同的name设置的值会被覆盖掉。一个name对应一个value值。

domain

domain指的就是当前cookie所在域名。如果我们设置cookie的时候不对其进行设置，就会自动绑定到执行语句的当前域。同一域名下的cookie客户端和服务端可以进行共享。一个浏览器窗口下可以设置多个不同域名的cookie。

path

path在我们不指定的时候，默认是当前web页面的路由。 如果当前路由是/，path='/'；如果当前路由是/post， path='/post'; 同一域名下，如果path不同，可以指定同name的多个cookie。

Expires / Max-Age

cookie是有有效期的。cookie本身不存在删除，当到达有效期时间的时候，cookie会被浏览器从磁盘删除。

1、当Expires被设置为未来的某个时间节点，或是Max-Age被设置为正数时，会被浏览器自动转化为未来的某个时间进行存储。此时cookie会被存储到我们的磁盘上，当在有效期范围内时，再次打开浏览器时，浏览器会自动去读取我们的磁盘来获取到可用的cookie。

2、当Expires没有设置或是Max-Age被设置为负数时，表示临时存储，并不会为我们生成cookie文件，此时的cookie会被存储在我们的浏览器内存中，且只会在打开的浏览器窗口或者子窗口有效，一旦浏览器关闭，cookie就会释放。

3、当Max-Age被设置为0时， 证明cookie失效。失效的cookie会自动从内存中删除。

4、Expires和Max-Age设置其一就可以了。当然现在的趋势是使用Max-Age来代替Expires。

secure

当这个值被设置为true时，表示cookie只会在https和ssl等安全协议下进行传输。

HttpOnly

当这个值被设置为true时，就不能够通过js来获取和操作cookie的值。这个值就只用于在http中做传输，可以有效的防止xss攻击。

sameSite

这个属性主要是通过限制第三方cookie来防止CSRF攻击和用户追踪。目前各大浏览器均已支持此属性，并且默认值为Lax.

1、Strict: 完全禁止第三方cookie,跨站点时，任何情况都不允许发送cookie。

2、Lax: 大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。

3、None： 跨站点访问时，可以携带cookie

cookie使用注意事项

cookie的诞生主要是解决http无状态的弊端，主要是在http请求中携带。所以cookie主要存储一些服务端需要的值。 对于前端存取一个全局变量但是对服务端没有什么用时，不建议使用cookie。 可以根据需要采用浏览器的其他存储，例如sessionStorage、localStorage等方式。