大家好，我是前端西瓜哥。今天来学习一下 Cookie 的属性有哪些？以及有什么作用？
Cookies 是浏览器本地保存数据的一种方案，且会在每次请求中带上该字段。
cookie 最常见的用法是作为用户登录凭证，赋予原本没有状态的 HTTP 协议以一种状态，让识别一个请求是哪一个用户发出成为可能。
HTTP 响应报文通过 Set-Cookie 头字段给浏览器给当前网站设置 cookie：
HTTP/1.1 200 OK Set-Cookie: lang=en-US; Path=/ Set-Cookie: token=abcd; Max-Age=6000; Path=/; Expires=Thu, 28 Apr 2022 16:31:36 GMT; HttpOnly
当然也可以在浏览器用 JS 脚本通过 document.cookie 或 CookieStore 来设置 cookie。
浏览器拿到 cookie 后，会将它们保存下来，在下一次请求时将这些 cookie 全放到 Cookie 请求头中，并用分号分隔：
GET / HTTP/1.1 Cookie: lang=en-US; token=abcd
需要特别注意的是，Cookie 的作用域是和 domain（域名或 ip）绑定的，端口无关。
你问我怎么知道的？因为我本地开发时用 localhost 加上各种端口，结果任意一个端口的请求都会将其他所有端口的 cookie 给我带上，真的是离谱。
那么和协议（http: 以及 https:）有关吗？答案是：以前是和协议无关的，但近几年标准发生了改变，不同浏览器支持程度不同，可以看看下面这篇文章：
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite#browser_compatibility
下面我们看看 cookie 的一些属性。
cookieName=cookieValue
Set-Cookie: token=abcd
设置 cookie 的名字和值，必填项。
HttpOnly
Set-Cookie: token=abcd; HttpOnly
设置后，只能通过 HTTP 响应报文的 Set-Cookie 来新增或更新 cookie ，客户端无法通过脚本的方式来读写 cookie。
对于敏感信息比如用户凭证，请一定要加上 HttpOnly。如果攻击者成功地实施了 XSS 攻击，会因为无法读取 cookie 而拿不到敏感信息。
Expires
Set-Cookie: token=abcd; Expires=Fri, 29 Apr 2022 05:29:01 GMT
cookie 的过期时间点，使用了 GMT 时间格式的字符串。
值必须符合下面格式：
<day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT
Max-Age
Set-Cookie: token=abcd; Max-Age=6000
cookie 的有效时间长度，单位为秒。通过设置小于等于 0 的数字，可以让一个 cookie 失效。
如果 Max-Age 和 Expires 同时存在，以 Max-Age 为准。
如果 Expires 和 Max-Age 都没设置，cookie 的有效期就会设置为 session， 一种临时会话状态，会在浏览器关闭时销毁。不过也不总是这样，这个得看浏览器实现，总之不会保存太久就是了。
Path
Set-Cookie: lang=en-US; Path=/user
设置 cookie 的路径作用域。
怎么理解？
我们以上面示例为例，浏览器会将名为 lang 的 cookie 保存到当前域名下。但之后请求时，会判断路径是否匹配 /user，来决定是否带上 cookie。
/：不会带上名为 lang 的 cookie/user：会带上/user/1：会带上/user2：不会带上
另外，需要注意的是，可能会有 Path 不同的复数个同名 cookie。
如果请求路径都匹配上了，不同 Path 下的多个同名 cookie 都会被发送：
GET /user HTTP/1.1 Cookie: lang=user-dir; lang=root
理论上，如果 Set-Cookie 没有指定 Path，就会被设置为当前请求的路径。不过实际用 Chrome 测试时，我发现都被设置为 / 了，看来浏览器也只是选择性遵守 HTTP 协议？
不过实际开发时我们都是直接使用 Path=/，简单粗暴覆盖所有路径，没有必要分路径，让事情变得复杂。上面的知识点，大家简单了解就好。
Domain
Set-Cookie: lang=en-US; Domain=.a.com
设置 cookie 的 domain 作用域。
在不提供该属性的情况下，会使用请求时的 domian，比如 http://www.a.com/api/v1/books 不设置 Domain 时，拿到的 cookie 的 Domain 属性会被设置为 www.a.com 。
通常我们会省略掉 Domain 属性。
但在希望多个子域名共享 cookie 的场景下，比如 sub1.a.com 和 sub2.a.com（或者再加上父域名 a.com），就需要显式将其设置为 .a.com。开头的小圆点可写可不写，都一样。
如果 Domain 不能覆盖当前域名，该 cookie 会被认定为无效，然后被丢弃掉。
Secure
Set-Cookie: token=en-US; Secure
该属性没有值，属性本身存在就代表设置为安全模式。
即请求必须为安全连接（HTTPS），cookie 才会被保存下来。HTTP 协议下，cookie 无效。
SameSite
Set-Cookie: token=abcd; SameSite=Strict
cookie 在跨域时是否应该被发送。
- Strict：跨域请求严禁携带本站 cookie。
- Lax：默认值。可通过顶级导航的方式并使用 GET 请求发时可以携带（目前我没有通过 demo 实现该效果，或者我们可以将其无限接近于 Strict）。在 Chrome 80 版本之后，Cookie 的 SameSite 由原来的 None 改为了 Lax。
- None：会携带 cookie。但前提是 Secure 设置为 true，即只能在 HTTPS 协议下使用（之前的标准没有这个要求）。
结尾
以上就是 Cookie 可以设置的所有属性，学废了吗？反正我是麻了。
我是前端西瓜哥，欢迎关注我，学习前端不迷路。
