概述
Cookie 是服务器保存在浏览器的一小段文本信息,一般大小不能超过 4KB。浏览器每次向服务器发出请求,就会自动附上这段信息。只有那些每次请求都需要让服务器知道的信息,才应该放在 Cookie 里面。
::: tip 注意 Cookie 不考虑协议和端口。也就是说,http://example.com设置的 Cookie,可以被https://example.com或http://example.com:8080读取。 :::
Api
服务器如何设置
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
属性
- Domain 指定 cookie 可以送达的主机。
- Expires 指定的 cookie 的最长有效时间。
- HttpOnly 阻止 JavaScript 通过 Document.cookie 属性访问 cookie。
- Max-Age 在 cookie 过期之前需要经过的秒数。
- Path 表示浏览器要发送该 Cookie 标头时,请求的 URL 中所必须存在的路径。
- SameSite 控制 cookie 是否随跨站请求一起发送,这样可以在一定程度上防范跨站请求伪造攻击(CSRF)。
- Strict、Lax、None
- Secure 表示仅当请求通过 https: 协议(localhost 不受此限制)发送时才会将该 cookie 发送到服务器,因此其更能够抵抗中间人攻击。
前端如何设置
读取
document.cookie; // 返回所有 Cookie,分号分隔
写入
document.cookie = "test1=hello"; // 每次只能写入一个,与 HTTP 协议一致;最好encodeURIComponent进行转义
document.cookie = `test2=world;expires=new Date().toGMTString();max-age=10;path=/;domain=mozilla.org;secure`; // 比如添加个test2,https传输,10秒自动删除
删除
document.cookie = "fontSize=;expires=Thu, 01-Jan-1970 00:00:01 GMT"; // 唯一方法,是设置它的expires属性为一个过去的日期。
推荐
使用 js-cookie 库;
资料
参考链接
MDN 官网:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Set-Cookie