跳到主要内容

概述

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 库;

资料

一个小框架:一个完整支持 unicode 的 cookie 读取/写入器 https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie

参考链接

MDN 官网:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Set-Cookie

https://wangdoc.com/javascript/bom/cookie