别再盲目用 JSON.parse(localStorage.getItem(…)) 了，这个检查你一定要加！

“我这边没问题啊。”

多少前端开发者的噩梦，都是从这句开始的。直到某天，本地存储里蹦出个坏数据，页面崩了，用户骂了，老板问了……

大部分项目里，我们都这样写过：

const user = JSON.parse(localStorage.getItem('user'));

写一遍，复制粘贴一百遍，从没多想过，直到：

• localStorage里根本不是合法的JSON（用户误操作DevTools）
• 存进去的是 undefined、空字符串""或null
• 版本升级后数据结构变了

💥 结果就是：

SyntaxError: Unexpected token u in JSON at position 0

整个应用崩溃，白屏，没脾气。

一行代码的防护罩

这个包装函数你本该一开始就写好：

functionsafeJSON(key, defaultValue = null) {
const item = localStorage.getItem(key);
if (!item) return defaultValue;
try {
returnJSON.parse(item);
  } catch {
    localStorage.removeItem(key);
return defaultValue;
  }
}

用法：

const user = safeJSON('user', { role: 'guest' });

• 先判断是否存在，避免 JSON.parse(null) 报错
• 异常捕获坏数据，自动清理，避免反复崩溃
• 给个默认值，保证应用状态安全回退

实战进阶：版本化你的 localStorage key

数据结构要大改？别直接换同一个 key，搞两个版本：

const userV1 = safeJSON('user:v1');
const userV2 = safeJSON('user:v2');

老客户端继续用旧版本，新版本走新版，零迁移，零痛苦。

TypeScript 加持：用类型守卫把错误挡在编译期

配合类型定义和守卫函数，保证代码层面就排除格式异常和字段缺失。

TL;DR

• JSON.parse(localStorage.getItem()) 假设数据完美，现实中99%不是。
• 用 null 判断+try/catch 包装，自动清理坏数据。
• 版本化 key，优雅应对结构变更。
• 会用TS就用TS，减少运行时风险。

如果你也被 localStorage 爆炸坑过，点个👏给我（最多50个），评论区分享你的惨痛经历，顺便把这招传给那个还在盲信字符串的同事！