JavaScript 安全操作 localStorage 的核心是：存前用 JSON.stringify() 序列化，读时用 JSON.parse() 配合默认值和 try-catch 容错，DOM 就绪即恢复状态防闪屏，并注意其容量、兼容性限制及 IndexedDB 等替代方案。
JavaScript 中安全地存储和读取 JSON 格式的本地数据，核心在于正确序列化、容错处理、及时同步 UI，并避开浏览器限制带来的静默失败。localStorage 是最常用且无需额外依赖的方案，但直接使用容易出错——比如存对象不转字符串、读取时未判空或解析失败就中断流程。
必须先 stringify 再存，不能直接 setItem 对象
localStorage 只接受字符串值。如果直接传入对象，如 localStorage.setItem('config', {theme: 'dark'})，实际存进去的是 "[object Object]"，后续无法还原。
- 存的时候用
JSON.stringify()：localStorage.setItem('userPrefs', JSON.stringify({lang: 'zh-CN', notifications: true})) - 避免手动拼接或误用
toString()，它对对象无效
读取时加默认值 + try-catch，防止崩溃
getItem 可能返回 null（如首次访问、隐私模式、存储被清空），而 JSON.parse(null) 会报错；缓存数据也可能因意外损坏导致 JSON 格式错误。
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 提供安全默认值：
const prefs = JSON.parse(localStorage.getItem('userPrefs') || '{}'); - 包裹
try-catch捕获解析异常：try { const data = JSON.parse(localStorage.getItem('cart') || '[]'); } catch (e) { console.warn('JSON 解析失败，使用空数组', e); data = []; }
在 DOM 就绪后立即恢复，避免 UI 闪屏
如果等页面渲染完再读取并更新主题、表单等状态，用户会看到“先亮后暗”“先空后填”的闪烁现象。
立即学习“Java免费学习笔记（深入）”；
- 在
DOMContentLoaded事件中执行读取：document.addEventListener('DOMContentLoaded', () => { const theme = JSON.parse(localStorage.getItem('ui') || '{"theme":"light"}').theme; document.body.className = theme === 'dark' ? 'dark' : ''; }); - 读取后立刻应用到 DOM：切换 class、填充 input、设置 select 的 selected 属性等
注意浏览器限制与替代方案
localStorage 不是万能的。它在无痕模式下不可用、iOS Safari 可能自动清理、总容量约 5–10 MB，且仅支持字符串。遇到大体积或结构复杂数据时需考虑：
- 超限场景：改用
IndexedDB存储二进制或分块 JSON - 跨标签页同步需求：监听
storage事件，实现多窗口状态联动 - 纯前端读取用户本地文件：用
<input type="file">+FileReader，不经过服务器
