Cookie简介

cookie是由浏览器保存在本地记录用户信息的一个文件，前端可以设置，也可以通过response响应头的set-cookie字段进行设置，且cookie的内容自动在请求的时候被传递给服务器，因此只能存储少量数据，数据一多就会显著增加每个Web 请求的大小。

cookie可以被服务器设置和浏览器每次请求会自动带上cookie的特点导致cookie 的安全性相对不高，但是可以被用于进行跨站用户追踪。

cookie是同步的，不能从Web worker进行访问。与LocalStorage和 SessionStorage一样，cookie仅限于字符串。

cookie以名/值对形式存储，如: username=John Doe。

在进行页面cookie操作的时候，应该尽量保证cookie个数小于20个，总大小小于4KB。

Javascript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

document.cookie="username=John Doe";

还可以给cookie添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

cookie默认属于当前页面，可以使用path参数告诉浏览器cookie的路径。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

修改cookie和创建cookie类似，旧的cookie将被覆盖。

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

只需要设置expires参数为以前的时间就可以删除cookie，删除时无需指定cookie的值。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

服务端要求浏览器建立cookie时，可以在请求头里放一些配置声明，修改cookie的使用特性

Chrome 80版本将cookie的跨站策略（SameSite）默认设置为了 Lax，即仅允许同站或者子站访问cookie，而老版本是None，即允许所有跨站cookie。

这会导致用户访问xyz.com时，浏览器默认将不会发送cookie给taobao.com，导致第三方 cookie失效的问题，需要通过在返回请求的header里将SameSite设置为None来解决。

Set-cookie: userId=123; SameSite=None

Secure是只允许cookie在HTTPS 请求中被使用。HttpOnly用来禁止使用JS访问cookie，这样可以避免XSS攻击。

Set-cookie: userId=123; SameSite=None; Secure; HttpOnly