8. Cookie 基础认知与三种存储对比

Cookie 就是浏览器的小饼干，每次请求自动带给服务器，容量小但能设过期时间。

核心区别：
① Cookie——4KB，自动带请求头，有过期时间
② localStorage——5MB，不自动带
③ sessionStorage——会话级

坑：cookie 要手动设 expires、cookie 会被中间人截取（敏感数据用 HTTPS）、document.cookie 是字符串要自己解析。

8.1 互动演示（Cookie 读写）

8.2 知识点讲解

① Cookie 是什么？跟另两个有什么区别？

localStorage / sessionStorage 是"浏览器自己的储物柜"，后端看不见；Cookie 是"出门必带的小纸条"，每次 HTTP 请求自动递给后端。这就是它存在的最大意义：前后端同步身份凭证。

// Cookie 长这样：
// 1. 一张小纸条，每次浏览器给服务器发请求都自动带上
// 2. 能定过期时间，到点自动消失
// 3. 个头很小（约 4KB），别往里塞大件

② 核心操作语法（存 / 读 / 设过期 / 删）

// 1. 存：直接往 document.cookie 上写字，一次只能写一条
// 塞一张：name 是张三
document.cookie = "name=张三";

// 2. 读：直接打印，好几条之间用分号 ; 隔开
// "name=张三; token=xyz"
console.log(document.cookie);

// 3. 定过期日：在后面拼 expires=一个 GMT 时间
// 不写 expires 就是"会话 Cookie"，关浏览器就没了
document.cookie = "token=xyz789; expires=" + new Date("2026-12-31").toUTCString();

// 4. 删：给同名那条设一个过去的时间，浏览器一看过期了自动丢
document.cookie = "name=; expires=" + new Date(0).toUTCString();

写 Cookie 是一条一条写，读是一次全读出来（用 ; 分隔）；想改某条就重新写同名键。GMT 时间用 toUTCString 转。

③ 三种存储方式核心对比（必背表）

最核心差异就是"是否随请求自动发给后端"：存 token 用 Cookie（后端要认）、存大数据用 localStorage（5MB）、临时数据用 sessionStorage。

④ 业务场景速查（作业复盘重点）

// localStorage：记登录状态、筛选项、皮肤颜色、长期缓存列表
// sessionStorage：表单草稿、这次会话临时传点东西
// Cookie：要让后端认得的身份牌（token、登录凭证、用户偏好）

本页重点