localStorage怎么用？JavaScript本地存储教程

localStorage是浏览器提供的轻量级本地存储方案，专为存储少量字符串数据设计，但使用时需格外注意：存对象必须先用JSON.stringify()序列化，读取时再用JSON.parse()还原，否则会丢失数据；读取不存在的键返回null而非undefined，易引发逻辑错误；它没有内置过期机制，需手动添加时间戳并校验，且客户端时间不可靠，仅适用于UI主题、表单草稿等非关键场景；同时它不支持监听、无类型安全、容量有限（通常5–10MB）且完全不加密，真正需要复杂持久化能力时，应转向IndexedDB或服务端方案。

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 或缓存数据，也会长期留在浏览器里。常见做法是存的时候附带时间戳：

• 存：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，但不同浏览器差异大）。

理论要掌握，实操不能落！以上关于《localStorage怎么用？JavaScript本地存储教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！