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

2026-01-26

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

localStorage只能存储字符串，存对象需用JSON.stringify()序列化，读取时用JSON.parse()反序列化；需处理null、undefined、Date等特殊类型，并注意容量限制与错误兜底。

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

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免费学习笔记（深入）”；

ShopEx助理

一个类似淘宝助理、ebay助理的客户端程序，用来方便的在本地处理商店数据，并能够在本地商店、网上商店和第三方平台之间实现数据上传下载功能的工具。功能说明如下：1.连接本地商店：您可以使用ShopEx助理连接一个本地安装的商店系统，这样就可以使用助理对本地商店的商品数据进行编辑等操作，并且数据也将存放在本地商店数据库中。默认是选择“本地未安装商店”，本地还未安

下载

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

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

https://www.php.cn/faq/2030660.html