每次登录后刷网页都不用重新输密码？背后功臣就是这块4KB的“小饼干”。
想象一下：每次你走进常去的咖啡馆，店员都能立刻叫出你的名字、记得你爱喝冰美式，是不是体验极佳？但如果你每次去都被当作陌生人，需要重新自我介绍、重新点单，你还会觉得这家店贴心吗？
这正是早期互联网的困境——HTTP协议生来就是“健忘症患者”。
HTTP的失忆症：无状态之痛
HTTP 协议有个重要特性 ——无状态。简单说，就是服务器 “记不住人”：每次请求都是独立的，上一次请求和下一次请求之间没有关联。
举个直观的例子：
- 你第一次访问某网站，服务器返回首页，但它不知道 “你是谁”；
- 你点击登录，输入账号密码，服务器验证通过并返回登录成功页面；
- 紧接着你查看购物车，这是第三次请求，但服务器依然不知道 “刚才登录的是你”。
这显然不合理。而 Cookie 的出现，就是为了给 HTTP 协议 “补记忆”—— 让服务器能通过 Cookie 识别用户身份，记住会话状态。
Cookie 是什么？浏览器里的 “小文本”
Cookie 本质是浏览器存储的一段小型文本数据（通常不超过 4KB），可以理解为服务器给浏览器的 “身份牌”：
- 由服务器生成，通过响应头传给浏览器；
- 浏览器把它存在本地（不同浏览器存储位置不同，比如 Chrome 存在本地文件中）；
- 之后每次访问该服务器，浏览器会自动把 Cookie 放进请求头，传给服务器。
Cookie 的工作流程：四步让服务器 “记住你”
Cookie 的工作过程就像 “领门禁卡→刷卡进门”，一步步让服务器识别你：
服务器生成 Cookie，发给浏览器
当你登录网站时，服务器验证账号密码通过后，会在响应头里加一个Set-Cookie字段，把 Cookie 传给浏览器：
// 服务器的响应头
HTTP/1.1 200 OK
Set-Cookie: session_id=abc123; expires=2024-12-31; path=/
Content-Type: text/html
这里的session_id=abc123是核心信息（相当于 “门禁卡号”），expires表示 Cookie 的过期时间，path=/表示全站生效。
步骤 2：浏览器存储 Cookie
浏览器收到响应后，会按照Set-Cookie的规则，把这段文本存在本地。只要没过期，就会一直保存。
步骤 3：每次请求自动携带 Cookie
之后你访问该网站的任何页面（比如 “我的订单”“个人资料”），浏览器会自动检查本地 Cookie：
- 如果 Cookie 没过期，且符合路径、域名要求，就会在请求头里加
Cookie字段，把它发给服务器：
// 浏览器的请求头
GET /my-orders HTTP/1.1
Host: www.example.com
Cookie: session_id=abc123
步骤 4：服务器通过 Cookie 识别用户
服务器收到请求后，解析Cookie字段里的session_id=abc123，查询后台数据库，确认这个 ID 对应的用户已登录，就会返回该用户的订单信息 —— 这样就实现了 “服务器记住你” 的效果。
Cookie 的核心特性：这些细节要知道
（1）自动携带，无需手动操作
这是 Cookie 最方便的地方：一旦存储，后续请求会自动带上，不用写代码手动传递（和 localStorage 不同，后者需要手动写代码传到服务器）。
（2）大小限制：不超过 4KB
Cookie 只能存少量数据，适合放 “用户 ID”“会话 ID” 等关键信息，不适合存大量内容（比如用户的详细资料、大量商品数据）。
（3）时效性：可设置 “有效期”
Cookie 不会永久存在，分为两种：
-
会话 Cookie：如果服务器没设置过期时间，Cookie 会在浏览器关闭后自动删除。比如你没勾选 “记住登录”，关闭浏览器再打开，就需要重新登录。
-
持久 Cookie：服务器通过
expires（具体时间）或max-age（秒数）设置过期时间，过期后浏览器会自动删除：// expires：指定具体过期时间（格式：Wdy, DD-Mon-YYYY HH:MM:SS GMT） Set-Cookie: user_id=123; expires=Wed, 31-Dec-2024 23:59:59 GMT // max-age：指定存活秒数（3600秒=1小时） Set-Cookie: user_id=123; max-age=3600
（4）域名和路径限制：防止 “跨站盗用”
- 域名限制：Cookie 只能被 “生成它的域名” 访问。比如
baidu.com生成的 Cookie，taobao.com无法读取（浏览器的安全机制，防止信息泄露）。 - 路径限制：通过
path字段指定 Cookie 生效的路径。比如path=/user，则只有访问/user下的页面（如/user/profile）时，Cookie 才会被携带。
前端如何操作 Cookie？
虽然 Cookie 主要由服务器生成，但前端也能通过document.cookie读写（有一定限制，比如受域名、路径约束）。
（1）读取 Cookie
// 读取当前页面可用的所有Cookie（字符串形式，用;分隔）
const allCookies = document.cookie;
console.log(allCookies); // 输出：user_id=123; theme=dark
（2）设置 Cookie
// 格式：键=值; 可选参数（过期时间、路径等）
document.cookie = "theme=dark; max-age=31536000; path=/";
// 说明：
// theme=dark：存储的键值对（主题设为深色）
// max-age=31536000：有效期1年（365天×24小时×3600秒）
// path=/：全站所有页面都能访问这个Cookie
（3）删除 Cookie
没有直接的删除方法，通过设置max-age=0让它立即过期：
// 把要删除的Cookie设为过期
document.cookie = "theme=; max-age=0; path=/";
总结：Cookie 的核心价值
Cookie 的本质是 “浏览器存储的小文本”，核心作用是解决 HTTP 协议的无状态问题，让服务器能识别用户、记住会话状态。它自动携带、大小有限、有过期机制，在登录状态保持、用户偏好记录等场景中必不可少。
理解了 Cookie 的原理和用法，不仅能搞懂日常上网时的 “记忆” 功能，在开发中也能更合理地使用它 —— 这也是前端基础中很重要的一个知识点。
