Cookie

Cookie 是浏览器保存的一小段键值数据。它最大的特点不是“能存数据”，而是“会跟随符合条件的 HTTP 请求一起发送给服务端”。

Cookie 主要解决什么问题

Cookie 常用于：

• 会话标识
• 登录态维持
• 偏好设置
• 一些统计或追踪场景

如果只是前端本地存储数据，而不需要自动随请求发送，通常优先考虑 Web Storage 或 IndexedDB。

Cookie 和本地存储最大的区别

最关键的一点是：

• Cookie 会参与请求
• localStorage / sessionStorage 不会自动随请求发送

因此 Cookie 更适合和服务端会话机制一起使用。

Set-Cookie 长什么样

Set-Cookie: sessionId=abc123; Path=/; Max-Age=3600; HttpOnly; Secure; SameSite=Lax

可以先把它理解成两部分：

• name=value
• 一组控制发送范围和安全策略的属性

最常见的几个属性

Path

控制在哪些路径下发送。

Set-Cookie: theme=dark; Path=/account

这表示只有匹配 /account 前缀的请求才会带上它。

Domain

控制哪些主机可以携带这个 Cookie。

Set-Cookie: sid=abc; Domain=.example.com

这通常可用于同站不同子域共享，但范围不要开得比实际需要更宽。

Expires 和 Max-Age

• Expires：绝对过期时间
• Max-Age：相对秒数

Set-Cookie: sid=abc; Max-Age=3600

没有显式过期时间时，通常就是会话级 Cookie。

HttpOnly

表示前端 JavaScript 不能通过 document.cookie 读取它。

Set-Cookie: sid=abc; HttpOnly

这通常用于认证 Cookie，减少 XSS 直接读走会话标识的风险。

Secure

表示只在 HTTPS 下发送。

Set-Cookie: sid=abc; Secure

SameSite

控制跨站请求场景下是否允许发送 Cookie。

• Strict：最严格
• Lax：常见默认策略
• None：允许跨站发送，但必须同时配 Secure

Set-Cookie: sid=abc; SameSite=None; Secure

前端能做什么

前端能读写“非 HttpOnly”的 Cookie：

console.log(document.cookie)

设置 Cookie：

document.cookie = `theme=dark; Path=/; Max-Age=${60 * 60 * 24 * 30}`

删除 Cookie 的常见方式是让它立刻过期：

document.cookie = 'theme=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT'

要注意：

• document.cookie 一次不是拿对象，而是一整串字符串
• 前端不能设置 HttpOnly

服务端更常是主入口

涉及登录态时，Cookie 通常由服务端通过响应头设置：

Set-Cookie: sessionId=abc; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=3600

这类场景下，前端往往不需要直接读它，只需要让请求自动携带。

使用时最容易混淆的点

Cookie 能不能发送，不只看“有没有设成功”，还要看：

• 请求路径是否匹配
• 域名是否匹配
• 是否 HTTPS
• 是否跨站
• SameSite 是否允许
• 浏览器是否限制第三方 Cookie

所以 Cookie 问题很多时候不是“存没存上”，而是“发没发出去”。

浏览器限制

常见限制包括：

• 单个 Cookie 一般约 4KB
• 每个域名下 Cookie 数量有限
• 第三方 Cookie 可能被浏览器直接限制

因此 Cookie 不适合存大量数据。

使用建议

• 需要自动随请求发送的标识，优先考虑 Cookie。
• 认证 Cookie 通常配 HttpOnly、Secure、合理的 SameSite。
• 不要把 Cookie 当通用大容量存储。
• 排查问题时，同时看请求头、响应头和浏览器策略，不要只看 document.cookie。