localStorage只能存储字符串，存对象需用JSON.stringify()序列化，读取时用JSON.parse()反序列化；需处理null、undefined、Date等特殊类型，并注意容量限制与错误兜底。
localStorage 不能存对象，直接 setItem 对象会变成 [object Object] —— 这是绝大多数人踩的第一个坑。
为什么 localStorage.setItem('user', {name: 'Alice'}) 存进去的是字符串 [object Object]
因为 localStorage 只接受字符串作为值。传入对象时，JavaScript 自动调用其 toString() 方法，结果就是那个毫无意义的 [object Object]。
- 必须手动序列化：用
JSON.stringify()转成字符串再存 - 读取时必须反序列化：用
JSON.parse()恢复成对象 - 如果值为
null、undefined或函数，JSON.stringify会忽略或报错，需提前处理
存数组、嵌套对象、带 Date 的数据要注意什么
JSON.stringify 无法保留 Date、RegExp、undefined、function、Symbol 等类型。例如：
const data = { time: new Date(), flag: undefined, cb: () => {} };
localStorage.setItem('data', JSON.stringify(data));
// 存进去的是 {"time":"2024-06-15T08:23:45.123Z","flag":null} —— Date 变字符串，undefined 变 null，cb 直接消失
- 时间建议存时间戳：
new Date().getTime()或new Date().toISOString() - 需要还原
Date时，读取后手动new Date(parsed.time) - 含函数或特殊结构的数据，不建议走
localStorage，改用 IndexedDB
怎么安全地封装一个支持对象/数组的本地存储工具
避免每次手动 stringify/parse，也防止解析失败导致脚本中断：
立即学习“Java免费学习笔记（深入）”；
- 写入时统一用
JSON.stringify，失败则返回false - 读取时用
try...catch包裹JSON.parse，解析失败返回null或默认值 - 删除键前先检查是否存在，避免静默失败
示例（轻量封装）：
const LS = {
set(key, value) {
try {
localStorage.setItem(key, JSON.stringify(value));
return true;
} catch {
return false;
}
},
get(key, defaultValue = null) {
const raw = localStorage.getItem(key);
if (!raw) return defaultValue;
try {
return JSON.parse(raw);
} catch {
return defaultValue;
}
},
remove(key) {
localStorage.removeItem(key);
}
};
LS.set('cart', [{id: 1, qty: 2}, {id: 2, qty: 1}]);
console.log(LS.get('cart')); // 正确还原为数组
localStorage 的容量、生命周期和常见误用点
典型容量是 5–10 MB（各浏览器不同），但它是**同步阻塞操作**，大数据量读写会卡主线程。
- 不要存图片 base64（极易超限）、大量日志或未压缩的 JSON
- 它永久存在，除非手动清除或用户清缓存 —— 不适合存 token 等敏感短期凭证（应配合有效期校验）
- 同源限制严格：协议 + 域名 + 端口完全一致才可访问，
http://a.com和https://a.com互不可见 - 隐私模式下部分浏览器会禁用或清空
localStorage，需降级处理（如 fallback 到内存存储）
真正难的不是“怎么存”，而是“存什么、存多久、出错了怎么兜底”——这些边界情况，往往在上线后半夜报警里才第一次露面。
