localStorage是什么及使用方法详解

localStorage是浏览器提供的客户端持久化键值存储API，支持同域多标签页共享、数据长期保留（除非手动清除），但仅能存储字符串、受同源策略限制且不参与HTTP传输；它与sessionStorage的核心区别在于生命周期（永久 vs 标签页级）和作用域（全局共享 vs 会话隔离），适用于用户偏好、表单草稿、轻量配置等非敏感场景，使用时需注意JSON序列化/反序列化、容量限制（约5MB）、隐身模式兼容性、iOS微信等特殊环境的数据丢失风险，并务必通过try/catch封装以保障健壮性——掌握这些关键细节，才能安全高效地用好这个无处不在却常被误用的前端存储利器。

localStorage 是浏览器提供的持久化键值存储 API，数据不会过期，除非手动清除或用户主动删除。

localStorage 和 sessionStorage 有什么区别

两者都存字符串，但生命周期和作用域不同：

• localStorage：同一域名下所有标签页共享，数据永久保存（除非代码调用 removeItem() 或用户清缓存）
• sessionStorage：仅当前标签页有效，关闭标签页即销毁
• 二者都不随 HTTP 请求发送，不占用带宽，也无服务端参与
• 都受同源策略限制 —— https://a.com 和 https://b.com 互不可读

怎么存、取、删数据（基础操作）

所有值都会被自动转成字符串；想存对象必须先 JSON.stringify()，读取时再 JSON.parse()：

localStorage.setItem('user', JSON.stringify({id: 123, name: 'Alice'}));
const user = JSON.parse(localStorage.getItem('user') || '{}');
localStorage.removeItem('user');

常见错误：

• 直接存对象：localStorage.setItem('obj', {x: 1}) → 实际存入 "[object Object]"
• 没处理 null 或空字符串导致 JSON.parse(null) 报错 → 建议用 JSON.parse(str || '{}') 或 try...catch
• 超过 5MB（多数浏览器限制）会抛 QuotaExceededError，需捕获异常

localStorage 有哪些典型使用场景

适合存轻量、非敏感、可丢失的客户端状态：

• 用户偏好设置（主题色、语言、字体大小）
• 表单草稿（比如长文本编辑框内容，刷新后恢复）
• 登录态标记（配合后端 token 使用，但不要存密码或敏感 token）
• 离线缓存简单配置或静态资源哈希（如 localStorage.setItem('version', '2.3.1')）

不适合：

• 需要服务端校验的数据（localStorage 可被用户任意修改）
• 高频写入（如每秒存一次计时器），可能触发性能抖动
• 跨域共享（无法绕过同源策略）

兼容性和替代方案要注意什么

IE8+ 支持 localStorage，但 IE8 的实现有 bug（如 key 包含特殊字符时失效）；现代项目基本无需考虑降级。真正容易被忽略的是：

• 隐身模式下部分浏览器（如 Safari）默认禁用 localStorage，会直接抛异常 → 必须包裹 try/catch
• 某些 iOS 版本在页面卸载前（如微信内嵌浏览器）可能丢数据，不能依赖它做关键状态同步
• 如需加密或更可靠存储，应结合 IndexedDB 或服务端 session，而非硬扛 localStorage

实际写的时候，别只写 localStorage.setItem 就完事，先测是否可用，再决定 fallback 方案。

到这里，我们也就讲完了《localStorage是什么及使用方法详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！