localStorage只能存储字符串,存对象需JSON.stringify()、取时需JSON.parse(),读取不存在key返回null而非undefined,无自动过期机制需手动实现,适用轻量简单场景。

localStorage 适合存少量字符串数据,不能直接存对象或函数,存之前必须 JSON.stringify(),取出来要 JSON.parse(),否则会出错或返回 "[object Object]"。
localStorage 只能存字符串,对象要先序列化
直接 localStorage.setItem('user', {name: 'Alice'}) 看似没报错,但实际存进去的是 "[object Object]",后续读取完全无法还原。必须手动转成 JSON 字符串:
localStorage.setItem('user', JSON.stringify({name: 'Alice', age: 28}))- 读取时用
JSON.parse(localStorage.getItem('user'))恢复对象 - 如果解析失败(比如值被手动篡改、或存了空字符串),
JSON.parse()会抛SyntaxError,建议加try/catch
读取不存在的 key 返回 null,不是 undefined
localStorage.getItem('missingKey') 返回的是 null,不是 undefined。这点常被忽略,导致条件判断出错:
- ❌ 错误写法:
if (localStorage.getItem('theme')) { ... }—— 若值为"false"或"0"也会进入分支 - ✅ 推荐写法:
const theme = localStorage.getItem('theme'); if (theme !== null) { ... } - 或者封装一层:
const getStorage = (key) => { try { return JSON.parse(localStorage.getItem(key) || 'null'); } catch { return null; } }
localStorage 没有过期机制,得自己处理时效
它不会自动清理,哪怕存的是临时 token 或缓存数据,也会长期留在浏览器里。常见做法是存的时候附带时间戳:
立即学习“Java免费学习笔记(深入)”;
- 存:
localStorage.setItem('tokenData', JSON.stringify({value: 'abc123', expires: Date.now() + 60 * 60 * 1000})) - 取:
const data = JSON.parse(localStorage.getItem('tokenData') || '{}'); if (data.expires && data.expires > Date.now()) { return data.value; } else { localStorage.removeItem('tokenData'); return null; } - 注意:不能依赖客户端时间做严格过期控制,仅适用于非关键场景(如 UI 主题、表单草稿)
真正需要可靠持久化又带类型、过期、加密需求的,应该考虑 IndexedDB 或结合后端的方案;localStorage 的边界很清晰——轻量、简单、不安全、无监听、无容量保障(通常 5–10MB,但不同浏览器差异大)。











