LocalStorage 存储对象需先用 JSON.stringify() 序列化为字符串，读取时用 JSON.parse() 反序列化并加异常处理；不支持函数、Date 等类型，需手动转换或过滤；可封装 setCache/getCache 工具函数提升复用性与容错能力。
LocalStorage 只能存储字符串，所以存对象前必须先序列化，取出来后再反序列化还原。
用 JSON.stringify() 转成字符串再保存
直接调用 JSON.stringify() 把对象转为 JSON 字符串，再用 localStorage.setItem() 存进去：
- 比如要存用户信息：const user = { name: "张三", age: 28, role: "admin" };
- 正确写法：localStorage.setItem("userInfo", JSON.stringify(user));
- 错误写法（会变成
[object Object]）：localStorage.setItem("userInfo", user);
用 JSON.parse() 安全读取并还原对象
读取时用 localStorage.getItem() 拿到字符串，再用 JSON.parse() 解析。注意加异常处理，避免解析失败导致报错：
- 推荐写法：const saved = localStorage.getItem("userInfo");
const user = saved ? JSON.parse(saved) : null; - 更稳妥的写法（捕获解析错误）：try { const user = JSON.parse(saved); } catch (e) { console.warn("解析缓存失败", e); }
存数组、嵌套对象、日期等注意事项
JSON 只支持基本数据类型（字符串、数字、布尔、null、数组、纯对象），不支持函数、undefined、Date、RegExp 等：
立即学习“Java免费学习笔记（深入）”；
- Date 类型会变成字符串（new Date().toJSON()），读取后需手动转回 Date 实例
- 如果对象含函数或特殊类型，考虑用 serialize-javascript 等库，或提前过滤/转换
- 数组同理：localStorage.setItem("list", JSON.stringify([1,2,3]));，读取后仍是数组
封装一个简单工具函数提升复用性
把存取逻辑收拢，减少重复代码，也方便统一加容错：
- function setCache(key, value) {
try { localStorage.setItem(key, JSON.stringify(value)); }
catch (e) { console.error("缓存写入失败", e); }
} - function getCache(key, defaultValue = null) {
try {
const str = localStorage.getItem(key);
return str ? JSON.parse(str) : defaultValue;
} catch (e) {
console.warn("缓存读取失败", e);
return defaultValue;
}
}
