17370845950

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":"2025-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，也防止解析失败导致脚本中断：

• 写入时统一用 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 到内存存储）

真正难的不是“怎么存”，而是“存什么、存多久、出错了怎么兜底”——这些边界情况，往往在上线后半夜报警里才第一次露面。