Web Storage只支持字符串，存对象需JSON.stringify转字符串再JSON.parse还原；Date等类型会丢失，须手动恢复；读取必须try...catch防解析失败；复杂对象应避免用JSON处理。
web storage（包括 localstorage 和 sessionstorage）本身只认字符串，对象、数组、日期、布尔值等一概不收——直接塞进去，javascript 会悄悄调用 .tostring()，结果就是 "[object object]" 或 "[object array]"，原始数据彻底丢光。
为什么必须走 JSON.stringify → 存字符串 → JSON.parse 这条链？
根本原因就一个：Web Storage 的 value 字段类型强制为 string。哪怕你传入 {name: "李四", scores: [92, 87]}，底层也会变成 "[object Object]"，再取出来已无法还原。
而 JSON.stringify() 能把合法的 JS 值（对象、数组、字符串、数字、布尔、null）转成标准 JSON 字符串；JSON.parse() 则负责反向还原。这是目前最轻量、兼容性最好、无需额外依赖的通用解法。
存对象数组的正确姿势
假设你有一组用户卡片数据：
const users = [
{ id: 1, name: "王五", active: true, lastLogin: new Date("2026-05-20") },
{ id: 2, name: "赵六", active: false, lastLogin: new Date("2026-05-18") }
];
直接存会失败。正确流程如下：
- 先用
JSON.stringify(users)转成字符串（注意：Date 会被转为 ISO 字符串，如"2026-05-20T00:00:00.000Z"） - 再调用
localStorage.setItem("usersList", jsonString) - 读取时，先
getItem拿到字符串，再JSON.parse()还原为数组
绕不开的三个关键细节
① Date、函数、undefined、Symbol、循环引用会被静默丢弃或报错
比如对象里有 lastLogin: new Date()，存进去是字符串，但还原后是普通字符串，不是 Date 实例——需要手动补：parsedUser.lastLogin = new Date(parsedUser.lastLogin)。
含方法的对象（如 {name: "张三", sayHi() { ... }}）存完再取，sayHi 就没了。
② 读取必须加 try...catchlocalStorage.getItem() 可能返回 null，也可能返回被人为篡改的非法 JSON（比如在开发者工具里手敲了 {name:）。不包一层 try...catch，JSON.parse() 一崩，整页逻辑可能中断。
③ 不要用 JSON 方法处理带函数或复杂原型的对象
Vue 组件实例、类实例、Map/Set 等原生集合类型，JSON 不支持。这类需求建议换用 structuredClone()（现代浏览器）+ 内存缓存，或服务端持久化。
封装一个安全可用的小工具
可以这样写个健壮的读写函数：
// 安全写入
function setStorage(key, data) {
try {
localStorage.setItem(key, JSON.stringify(data));
} catch (e) {
console.warn("存储失败:", e);
}
}
// 安全读取
function getStorage(key, fallback = []) {
try {
const str = localStorage.getItem(key);
return str ? JSON.parse(str) : fallback;
} catch (e) {
console.warn("解析失败，返回默认值:", e);
return fallback;
}
}
// 使用示例
setStorage("cartItems", [{id: 101, qty: 2}, {id: 102, qty: 1}]);
const cart = getStorage("cartItems"); // 自动兜底为 [] 
