“我這邊沒問題啊。”

多少前端開發(fā)者的噩夢(mèng)，都是從這句開始的。直到某天，本地存儲(chǔ)里蹦出個(gè)壞數(shù)據(jù)，頁(yè)面崩了，用戶罵了，老板問了……

大部分項(xiàng)目里，我們都這樣寫過：

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

寫一遍，復(fù)制粘貼一百遍，從沒多想過，直到：

• localStorage里根本不是合法的JSON（用戶誤操作DevTools）
• 存進(jìn)去的是 undefined、空字符串""或null
• 版本升級(jí)后數(shù)據(jù)結(jié)構(gòu)變了

結(jié)果就是：

SyntaxError: Unexpected token u in JSON at position 0

整個(gè)應(yīng)用崩潰，白屏，沒脾氣。

一行代碼的防護(hù)罩

這個(gè)包裝函數(shù)你本該一開始就寫好：

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

用法：

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

• 先判斷是否存在，避免 JSON.parse(null) 報(bào)錯(cuò)
• 異常捕獲壞數(shù)據(jù)，自動(dòng)清理，避免反復(fù)崩潰
• 給個(gè)默認(rèn)值，保證應(yīng)用狀態(tài)安全回退

實(shí)戰(zhàn)進(jìn)階：版本化你的 localStorage key

數(shù)據(jù)結(jié)構(gòu)要大改？別直接換同一個(gè) key，搞兩個(gè)版本：

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

老客戶端繼續(xù)用舊版本，新版本走新版，零遷移，零痛苦。

TypeScript 加持：用類型守衛(wèi)把錯(cuò)誤擋在編譯期

配合類型定義和守衛(wèi)函數(shù)，保證代碼層面就排除格式異常和字段缺失。

TL;DR

• JSON.parse(localStorage.getItem()) 假設(shè)數(shù)據(jù)完美，現(xiàn)實(shí)中99%不是。
• 用 null 判斷+try/catch 包裝，自動(dòng)清理壞數(shù)據(jù)。
• 版本化 key，優(yōu)雅應(yīng)對(duì)結(jié)構(gòu)變更。
• 會(huì)用TS就用TS，減少運(yùn)行時(shí)風(fēng)險(xiǎn)。