localStorage仅支持字符串存储，需JSON编码/解码、类型转换及try-catch容错；读取须校验null与JSON有效性并设默认值；配合时间戳、手动导出、降级策略和storage事件可增强离线体验，但不适用于敏感信息、大文件、跨设备同步及高频写入场景。
localStorage 能让网页在离线时继续使用部分功能，但它不是“真正离线”的万能方案——它只保存数据，不处理网络状态、同步冲突或服务端逻辑。关键在于：存得稳、读得准、出错有退路。
存数据前必须做三件事
localStorage 只认字符串，直接塞对象或数字会丢数据：
- 对象和数组一律用 JSON.stringify() 编码后再存
- 数字建议转成字符串再存（如
localStorage.setItem('count', String(42))），读取时用parseInt()或parseFloat()还原 - 每次写入都套 try-catch，捕获
QuotaExceededError（存储满）、DOMException（无痕模式禁用等）
读数据时别跳过校验
getItem 返回 null 不代表“没存”，可能只是被清空或失效：
- 判断是否存在，用
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，大量操作会阻塞主线程
