6. localStorage 本地存储

localStorage 就是浏览器给你的"永久储物柜"：放进去的东西，关浏览器、关机都还在，只有你手动清缓存或代码删掉才消失。注意：柜子只收"纸条"（字符串），想存对象得先 JSON.stringify 打包（第 9 页讲）。

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;

// 附加：key(下标) 按位置抽纸条的名字，下标从 0 开始
localStorage.key(0); // 第 1 张纸条叫什么名字

方法	作用	注意
setItem('键','值')	存储数据	同名键覆盖旧值
getItem('键')	读取数据	没有返回 null，不是 undefined
removeItem('键')	删除一条	删不存在的键不报错
clear	清空全部	慎用，全没
length / key(i)	条数 / 按下标取键名	i 从 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. 把列表数据缓存一下，少请求几次接口，省流量

一句话记住：setItem 存 / getItem 取（没有返回 null）/ removeItem 删 / clear 清空 / length 数数；永久保存、按域名隔离、只存字符串。