json.parse()白屏源于未捕获的syntaxerror；需前置校验（类型/空白/开头字符/schema）、解析时try/catch分类捕获并上报、失败后按场景降级（默认值/空数组/重新登录），并增强写入守卫。
json.parse() 解析损坏数据导致白屏，本质是未捕获的语法错误中断了 js 执行流。防御核心是：**在解析前校验结构、解析时兜底捕获、失败后提供安全降级**。
前置校验：避免无效字符串进入 parse
很多白屏源于 localStorage 中残留的空值、undefined 字符串或 HTML 片段（如被意外写入的“<script>…”）。不要直接 parse 任意取值：</script>
- 先用 typeof + trim() 排除非字符串类型和纯空白
- 用正则快速排除明显非法开头（如
/^[{\[]/.test(str)），不匹配则跳过解析 - 对已知字段做轻量 schema 检查（例如期望是对象，就检查
str.trim().startsWith('{')）
解析时强制 try/catch + 明确错误分类
仅用 try/catch 不够，需区分错误类型并记录线索：
- 捕获 SyntaxError：说明 JSON 格式损坏，可记录前 50 字符供排查
- 捕获其他错误（如内存溢出、递归过深）：说明数据异常庞大或存在循环引用，应限制解析超时或深度
- 避免空 catch —— 至少向监控系统上报
error.message + ' | data: ' + str.substring(0, 40)
提供可信默认值与静默降级路径
解析失败 ≠ 功能崩溃。按场景设定 fallback：
- 配置类数据（如 theme、lang）→ 返回预设默认对象：
{ theme: 'light', lang: 'zh-CN' } - 列表类数据（如 history、cart）→ 返回空数组
[]，避免后续 map/reduce 报错 - 关键业务状态（如 auth token）→ 清除无效存储并触发重新登录，而非卡在白屏
增强本地存储的写入守卫（一劳永逸）
问题常源于写入端不严谨。封装 setItem，自动校验再存储：
- 写入前先
JSON.stringify(value)，成功才存入 localStorage - 失败时抛出带上下文的错误（如
localStorage.set('user', invalidObj) failed），便于定位源头 - 开发环境开启「存储变更日志」，监听 storage 事件打印 key/value 变化
不复杂但容易忽略：一次没兜住的 JSON.parse 就可能让整个页面失去响应。把校验、捕获、降级三步变成标准动作，白屏率会显著下降。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
