本地存储使用教程：localStorage保存用户数据方法

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《本地存储怎么用？localStorage保存用户数据教程》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

localStorage只能存字符串，存对象需用JSON.stringify()序列化，取时用JSON.parse()反序列化并加try...catch；读取前须判空防null；无自动过期机制，需手动添加时间戳并校验。

localStorage 只能存字符串，别直接塞对象

直接 localStorage.setItem('user', { name: 'Alice' }) 不会报错，但实际存进去的是 [object Object]。JavaScript 会自动调用 toString()，结果就是个空壳。

正确做法是序列化：

• 存的时候用 JSON.stringify()： localStorage.setItem('user', JSON.stringify({ name: 'Alice', id: 123 }))
• 取的时候用 JSON.parse()： const user = JSON.parse(localStorage.getItem('user'))
• 记得加 try...catch——如果存储内容被手动篡改或损坏，JSON.parse() 会直接抛 SyntaxError

读取时要检查值是否存在，避免解析 null

localStorage.getItem('user') 在键不存在时返回 null，不是 undefined。直接传给 JSON.parse(null) 会得到 null（不报错但结果意外），而更常见的是你期望一个对象却拿到 null，后续访问 user.name 就崩了。

稳妥写法：

• 先判断： const raw = localStorage.getItem('user'); if (raw) { user = JSON.parse(raw); }
• 或者用空值合并： const user = JSON.parse(localStorage.getItem('user') ?? '{}');（但注意这会把缺失键默认成空对象，未必符合业务逻辑）

localStorage 没有过期机制，得自己控制生命周期

它不会自动清理，也不会因为页面关闭或浏览器重启而失效。用户数据可能长期滞留，甚至跨会话“复活”，这在某些场景下是隐患。

常见应对方式：

• 写入时附带时间戳：localStorage.setItem('user', JSON.stringify({ data: {...}, expires: Date.now() + 7 * 24 * 60 * 60 * 1000 }))
• 读取时校验：if (user.expires && user.expires
• 敏感操作前主动清理（比如登出时明确调用 localStorage.removeItem('user')）

注意同源限制和存储上限，别堆太多数据

localStorage 是按协议+域名+端口严格隔离的。https://a.com 和 http://a.com 互不可见；localhost:3000 和 localhost:8080 也不共享。

容量方面，大多数浏览器给每个源约 5–10MB，但它是**字符长度**（不是字节数），中文、emoji 都算多个字符。存大对象容易触发 QuotaExceededError。

建议：

• 只存关键字段（如 id、token、theme），别存完整用户资料或列表
• 定期用 Object.keys(localStorage).length 和 encodeURI(JSON.stringify(localStorage)).length 估算占用
• 需要存大量结构化数据时，考虑 IndexedDB 而非硬塞 localStorage

实际项目里最常出问题的，不是怎么写，而是忘了校验、忘了清理、忘了它根本不知道“用户已登出”这件事。

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