Cookie简介

什么是Cookie

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

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

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

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

个数及大小限制

	IE6.0	IE7.0/8.0	Opera	FF	Safari	Chrome
cookie个数	每个域为20个	每个域为50个	每个域为30个	每个域为50个	没有个数限制	每个域为53个
cookie大小	4095个字节	4095个字节	4096个字节	4097个字节	4097个字节	4097个字节

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

Cookie使用

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 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=/";

读取cookie

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

修改cookie

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

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

删除cookie

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

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

Cookie配置

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

SameSite

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

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

Set-Cookie: userId=123; SameSite=None

Secure和HttpOnly

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

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