6. localStorage 本地存储

localStorage 就是浏览器的永久存储，关了再开数据还在。

核心三个：
① setItem(key, value)——存
② getItem(key)——取
③ removeItem(key)——删
④ clear()——全清

坑：只能存字符串（对象要 JSON.stringify）、容量 5~10MB、同源才能读。

6.1 互动演示（增删改查全 API）

6.2 知识点讲解

① 五个 API 逐个讲（这套组合拳背熟）

// 1. 存：setItem("纸条名字", "纸条内容")，同名再存会盖住旧的
// 往柜子里塞一张纸条
localStorage.setItem("username", "张三");

// 2. 取：getItem("纸条名字")，柜子里没这张就返回 null
// 拿到 "张三"
localStorage.getItem("username");

// 3. 删：removeItem("纸条名字")，只抽走这一张
// 这张纸条扔了
localStorage.removeItem("username");

// 4. 清空：clear，整柜倒空，慎用
// 整柜倒空，慎用
localStorage.clear();

// 5. 数数：length，柜子里现在有几张纸条
// 现在柜子里有几张纸条
localStorage.length;

// 第 1 张纸条叫什么名字
localStorage.key(0);

getItem 拿不到返回 null：判断"有没有数据"要写 if (localStorage.getItem('x') !== null)，别拿 undefined 比较。

② 生命周期：永久保存（和其他存储最大的区别）

// 永久保存：关浏览器、重启电脑都不丢
// 只有两种情况会没：
// 1. 代码里调 removeItem 或 clear 主动删
// 2. 用户自己去浏览器设置里清缓存
// 在哪能看见：Chrome 按 F12 → Application → LocalStorage
// 所有纸条都摆在那，还能手动删，调试特别顺手

数据按"域名"分开存：www.a.com 存的和 www.b.com 互不相通。换电脑、换浏览器也看不到——别把 localStorage 当服务器数据库用。

③ 典型业务场景（什么时候用）

// 1. 记住登录状态：把 token 塞进去，下次打开自动免登录
// 存登录令牌
localStorage.setItem("token", "abc123");

// 2. 用户选的筛选项、皮肤颜色（深色/浅色）下次打开还记得
// 记住皮肤配色
localStorage.setItem("theme", "dark");

// 3. 把列表数据缓存一下，少请求几次接口，省流量
// 缓存商品列表
localStorage.setItem("goodsList", "[...]");

本页重点