localStorage 仅支持字符串存储，若要保存对象或数字，需先进行“翻译”——通过 JSON 编码、类型转换，并配合 try-catch 异常处理。读取时，不能直接使用，需先校验是否为 null，检查 JSON 解析是否出错，最好再设置默认值。结合时间戳标记、手动导出、降级策略以及 storage 事件，能显著提升离线体验的流畅度。但需注意，它不适合处理敏感信息、大文件、跨设备同步或高频写入——这些场景已超出其能力范围。
简单来说，localStorage 能让网页在断网时仍保持部分功能，但它并非“真正离线”的万能方案——它只负责数据存储，网络状态、同步冲突、服务端逻辑等均不在其管辖范围。关键在于三个核心：存储稳定、读取准确、出错有备选方案。
存储前必须完成三项准备
localStorage 有一个特性——它只接受字符串。直接存入对象，得到的往往是 [object Object]，数字也会被隐式转为字符串。因此，存储前需格外注意：
- 对象和数组，务必使用 JSON.stringify() 转换为字符串后再存储，不可省略。
- 数字最好显式转为字符串，例如
localStorage.setItem('count', String(42))，读取时通过parseInt()或parseFloat()还原，避免类型混淆。 - 每次写入操作都包裹在 try-catch 中，专门捕获
QuotaExceededError（存储空间已满）和DOMException（如无痕模式禁用 localStorage），防止整个页面崩溃。
读取时不能跳过校验步骤
很多人误以为 getItem 返回 null 就表示“未存储”，但实际上可能是被清除、过期或从未写入。因此，读取数据时应多加验证：
- 判断某个 key 是否存在，使用
localStorage.getItem('key') !== null，而非if (localStorage.getItem('key'))——因为"0"或"false"均为真值，容易产生误判。 - 解析 JSON 前，先检查字符串是否为空或损坏，直接执行
JSON.parse(null)会抛出异常，需提前设置兜底逻辑。 - 为关键数据配置默认值，例如
const theme = JSON.parse(localStorage.getItem('theme') || '"light"')，这样即使未存储，也能获得合理的初始状态。
离线场景下的实用增强策略
仅依赖 localStorage 在实际用户场景中容易出现问题，加入以下技巧可大幅提升可靠性：
- 添加时间戳标记：存储数据时一并写入
savedAt: Date.now()，业务层可据此判断数据是否过期，例如设置缓存 24 小时后自动失效。 - 提供手动导出功能：添加“备份到文件”按钮，让用户将数据导出为 JSON 文件，即使缓存被清空也能恢复。
- 降级到 sessionStorage 或内存变量：当 localStorage 不可用时，至少保留当前会话内的状态，避免完全失效。
- 监听 storage 事件：其他标签页修改数据后，当前页面可自动刷新 UI——注意，本页修改不会触发自身事件，这一点需牢记。
哪些场景它无法胜任，应避开
localStorage 适用于轻量、非敏感、同源的本地缓存，但以下场景最好避免使用：
- 存储 token 或密码——XSS 攻击可直接读取，相当于将钥匙挂在门外。
- 大文件或 Base64 图片——浏览器配额通常只有 5–10 MB，一张图片就会占满空间。
- 需要多设备同步的数据——它仅存在于当前浏览器、当前域名下，切换设备后数据丢失。
- 高频写入场景——它是同步 API，大量操作会阻塞主线程，导致页面卡顿甚至无响应。
