如何用javascript实现本地存储【教程】

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 到内存存储）

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