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
实际项目里最常出问题的,不是怎么写,而是忘了校验、忘了清理、忘了它根本不知道“用户已登出”这件事。









