HTML5localStorage存取对象方法详解

本文深入解析了HTML5 localStorage存储对象的正确方法与关键陷阱：由于localStorage仅支持字符串存储，必须通过JSON.stringify序列化对象、JSON.parse反序列化读取，并务必用try...catch捕获解析异常；同时警示JSON无法处理函数、undefined、Symbol和Date等类型，需手动转换时间戳或ISO字符串来保全日期数据；还强调其约5MB的严格容量限制、跨域隔离机制、无访问控制的安全风险，以及缺乏查询、索引和过期机制的根本局限——它绝非数据库替代品，而仅适用于缓存少量、非敏感、结构简单的前端数据。

localStorage 只能存字符串，对象必须 JSON.stringify

直接 localStorage.setItem('user', {name: 'Alice'}) 会存进去一个 [object Object]，读出来就是个字符串，不是原来那个对象。这是因为 localStorage 底层只接受 string 类型的值，任何非字符串输入都会被强制调用 .toString()。

正确做法是手动序列化：

• 存的时候用 JSON.stringify(obj)
• 取的时候用 JSON.parse(str)
• 务必加 try...catch，因为 JSON.parse 遇到非法 JSON 会直接抛错（比如存储内容被手动篡改过）

示例：

const user = { id: 123, name: 'Alice', active: true };
localStorage.setItem('user', JSON.stringify(user));

const saved = localStorage.getItem('user');
let parsed;
try {
  parsed = JSON.parse(saved);
} catch (e) {
  console.error('JSON parse failed:', e);
  parsed = null;
}

JSON.stringify 不能处理函数、undefined、Symbol、Date 等类型

如果对象里有 function、undefined、Symbol 或者 Date 实例，JSON.stringify 会静默忽略它们——不报错，但数据就丢了。

常见踩坑场景：

• { now: new Date(), handler: () => {} } → 存进去只剩 {}
• { count: undefined } → 这个字段直接消失
• localStorage.setItem('cache', JSON.stringify(new Date())) → 存的是字符串 "2024-06-15T08:23:45.123Z"，但读出来只是字符串，不是 Date 对象

如果真要存 Date，得自己转成时间戳或 ISO 字符串，并在读取后手动恢复：

const data = { ts: Date.now(), name: 'test' };
localStorage.setItem('data', JSON.stringify(data));
// 读取后
const parsed = JSON.parse(localStorage.getItem('data'));
const date = new Date(parsed.ts); // 手动还原

localStorage 容量限制和跨域隔离很严格

多数浏览器给每个源（origin）配额约 5MB，超了会触发 QuotaExceededError。这不是警告，是同步报错，后续代码会中断。

另外几个关键事实：

• 协议、域名、端口任意一个不同，就是不同源，localStorage 完全不共享
• http://a.com 和 https://a.com 是两个独立存储空间
• 本地文件打开（file:// 协议）下，多数浏览器禁用 localStorage 或每次都是干净沙盒
• 隐私模式下，有些浏览器会临时启用但关闭即清空

检查是否可用且未满：

try {
  const test = '__storage_test__';
  localStorage.setItem(test, test);
  localStorage.removeItem(test);
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    console.warn('localStorage quota exceeded');
  }
}

别把敏感数据放 localStorage，也别当数据库用

localStorage 是纯前端同步存储，没有任何访问控制——JS 脚本可读可写，XSS 攻击一打一个准。密码、token、用户身份标识这类东西，存了等于裸奔。

它也不是数据库替代品：

• 没索引、没查询能力，查个字段得全量遍历 for (let i = 0; i
• 没有事务、没有过期机制，想“自动删除”只能自己记时间戳 + 每次读取时判断
• 大对象反复存取会明显卡 UI，因为 JSON.stringify/parse 是同步阻塞操作

真正该考虑的边界：单页应用里缓存非敏感、结构简单、体积小（

今天关于《HTML5localStorage存取对象方法详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！