使用 localStorage 实现离线应用的本地数据持久化

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，大量操作会阻塞主线程