HTML5localStorage使用技巧与保存方法

localStorage并非万能的持久化工具，它仅支持字符串存储、不跨域、无过期机制且容量有限（通常5–10MB），误用极易导致数据丢失或异常；存对象必须手动JSON序列化与反序列化，需警惕循环引用、null/undefined陷阱及跨标签页不同步问题；虽可通过storage事件监听其他页面变更，但自身不触发，且禁用本地存储时会抛出异常；真正关键的不是“怎么存”，而是“该不该存”——它适合临时缓存、用户偏好或轻量草稿，却不适用于登录态、敏感信息或复杂结构数据，这类场景应转向IndexedDB等更健壮的方案。

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”——它没有事务、没有查询能力、没有后台同步逻辑。临时缓存、用户偏好、轻量表单草稿还行；登录态、敏感信息、结构复杂的数据，早该换方案了。

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