“我這邊沒問題啊?！?/span>

多少前端開發者的噩夢，都是從這句開始的。直到某天，本地存儲里蹦出個壞數據，頁面崩了，用戶罵了，老板問了……

大部分項目里，我們都這樣寫過：

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

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

• localStorage里根本不是合法的JSON（用戶誤操作DevTools）
• 存進去的是 undefined、空字符串""或null
• 版本升級后數據結構變了

結果就是：

SyntaxError: Unexpected token u in JSON at position 0

整個應用崩潰，白屏，沒脾氣。

一行代碼的防護罩

這個包裝函數你本該一開始就寫好：

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) 報錯
• 異常捕獲壞數據，自動清理，避免反復崩潰
• 給個默認值，保證應用狀態安全回退

實戰進階：版本化你的 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，減少運行時風險。