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

Cookie 像一张"随身携带的小纸条"：浏览器每次向服务器发请求，都会自动把纸条带上——所以"登录凭证 token"这种需要后端认的东西就放 Cookie。它很小（约 4KB），但能设过期时间。

8.1 互动演示（Cookie 读写）

演示 document.cookie 的存、读、删。file:// 下浏览器可能限制 Cookie，属正常现象。

8.2 知识点讲解

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

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

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

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

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

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

// 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 转。

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

存储方式	存储周期	存储大小	是否随请求发给后端	作用域
localStorage	永久保存，手动删除才消失	约 5MB	不会	同域名所有页面共享
sessionStorage	当前标签页关闭即销毁	约 5MB	不会	仅限当前标签页
Cookie	可自定义过期时间	约 4KB	每次 HTTP 请求自动携带	同域名，可限制路径

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

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

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

一句话记住：Cookie 4KB、随请求自动发给后端（存 token）、可设过期时间；localStorage 5MB 永久、sessionStorage 5MB 关标签页即失。