localStorage是什么怎么用

大家好，今天本人给大家带来文章《localStorage是什么及使用教程》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

localStorage与sessionStorage均存储字符串且受同源策略限制，区别在于：1. localStorage同域所有标签页共享、永久保存；2. sessionStorage仅当前标签页有效、关闭即销毁；二者均不参与HTTP传输。

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学习网公众号吧！