如何操作HTML5 localStorage实现数据保存？

本文共计699个文字，预计阅读时间需要3分钟。

localStorage 并非万能的持久化方案，它仅存储字符串、不支持跨域、没有过期机制，使用不当会导致数据丢失。

localStorage.setItem() 存不了对象或数组

直接传 JSON.stringify() 以外的值，比如对象、数组、数字，会被自动转成 "[object Object]" 或 "1,2,3"，取出来根本不是原来的东西。

• 必须手动序列化：localStorage.setItem('user', JSON.stringify({name: 'Alice', age: 30}))
• 读取时也要反序列化：JSON.parse(localStorage.getItem('user'))
• 如果值是 null 或 undefined，setItem 会存成字符串 "null"，不是真的空值
• 遇到 TypeError: Converting circular structure to JSON 就说明对象里有循环引用，不能直接 JSON.stringify

localStorage 在同源页面间共享，但不跨标签页实时同步

你在标签页 A 存了数据，标签页 B 刚打开时能读到，但 A 改了数据，B 不会自动更新 —— 它不知道变了。

• 监听 storage 事件才能感知其他标签页变更：window.addEventListener('storage', e => console.log(e.key, e.newValue))
• 这个事件在触发修改的标签页自身不会触发，只通知其他同源页面
• 如果用户禁用浏览器本地存储（比如无痕模式下某些设置），setItem 会直接抛 QuotaExceededError，得包 try/catch

localStorage 没有自动清理，满容量就写失败

多数浏览器限制在 5–10MB，但实际能写多少取决于编码方式和 Unicode 字符 —— 一个中文字符占 2–4 字节，很容易踩线。

立即学习“前端免费学习笔记（深入）”；

• 用 localStorage.length 只能知道键数量，不能判断容量是否快满
• 检查是否写入成功：写完立刻 getItem 对比，或者捕获异常
• 别往里面塞大段 HTML、Base64 图片、未压缩日志 —— 这些该走 IndexedDB
• 清空前先确认：执行 localStorage.clear() 会删掉当前域名下所有键，不可逆

真正难的不是怎么存，而是想清楚“这个数据到底该不该放 localStorage”——它没有事务、没有查询能力、没有后台同步逻辑。临时缓存、用户偏好、轻量表单草稿还行；登录态、敏感信息、结构复杂的数据，早该换方案了。