安全读取 localStorage 的关键是提前防御而非事后捕获：第一步用 ?? 提供默认值，第二步校验字符串有效性，第三步 try-catch 安全解析，第四步结构校验；须封装成健壮函数应对脏数据常态。
读取 localStorage 时的异常不是来自“抛错”，而是来自 getItem() 返回 null 或损坏字符串后 JSON.parse() 报错——兜底的关键是**提前防御、显式判空、安全解析、默认兜底**，而不是等错误发生再捕获。
明确 getItem() 的返回值特性
localStorage.getItem(key) 永远只返回两种值：一个字符串（哪怕存的是 "null" 或 "undefined"），或 null（键不存在或被删过）。它从不返回 undefined，也不会自动转类型。常见误用：
- 直接
if (localStorage.getItem('theme'))→ 若值为"false"或""，条件为假，逻辑跳过 -
document.title = 'App - ' + localStorage.getItem('user')→ 若未存，结果是'App - null' -
JSON.parse(localStorage.getItem('config'))→ 若返回null，会抛SyntaxError
读取时四步安全兜底
每次读取都应按顺序执行以下操作，缺一不可：
-
第一步：用 ?? 提供基础默认值 —— 防止
null进入后续流程
例如：const raw = localStorage.getItem('settings') ?? '{}'; -
第二步：校验字符串有效性 —— 排除空串、空白符、非法 JSON 前缀
例如：if (!raw.trim()) return DEFAULT_SETTINGS; -
第三步：try-catch 包裹 JSON.parse() —— 解析失败不中断脚本
例如：try { return JSON.parse(raw); } catch (e) { console.warn('配置解析失败，使用默认值'); return DEFAULT_SETTINGS; } -
第四步：对解析结果做结构校验（可选但推荐） —— 确保关键字段存在且类型正确
例如：if (typeof config.theme !== 'string') config.theme = 'light';
封装成健壮的读取函数
把上述逻辑收拢为一个可复用函数，避免重复写判断：
立即学习“Java免费学习笔记（深入）”；
function loadConfig(key, defaultValue = {}) {
const raw = localStorage.getItem(key) ?? '{}';
if (!raw.trim()) return defaultValue;
try {
const parsed = JSON.parse(raw);
return { ...defaultValue, ...parsed }; // 浅合并，保留默认字段
} catch (e) {
console.error(`读取 ${key} 失败`, e);
return defaultValue;
}
}
调用时：const config = loadConfig('app_config', { theme: 'light', lang: 'zh-CN' });
特别注意脏数据场景
真实项目中，localStorage 常因异常退出、手动编辑、跨环境同步等原因存入非法值，比如：
- 存了字符串
"null"→JSON.parse('null')得到null，不是对象 - 存了
"undefined"→JSON.parse('undefined')直接 SyntaxError - 存了未闭合的 JSON：
"{theme:"dark"→ 解析失败
这些都不是“异常情况”，而是常态。所以任何从 localStorage 读取并解析 JSON 的地方，都必须带 try-catch 和默认回退，不能依赖“之前存得对”。
