安全读取解析localStorage JSON需先取值校验再解析：先检查getItem返回值是否为非空字符串，再用try/catch捕获SyntaxError，禁止用||{}等静默fallback，应区分无数据、损坏、格式不匹配三种状态。
安全读取和解析 localStorage 中的 JSON 数据，核心是“先取值、再校验、后解析”，不能假设数据一定存在或格式正确。
从 localStorage 读取字符串要防 null 和空值
localStorage.getItem() 返回的是字符串或 null。直接传给 JSON.parse() 会报错：
- 如果键不存在，返回 null →
JSON.parse(null)报 TypeError - 如果存的是空字符串
""→JSON.parse("")报 SyntaxError - 如果存的是非 JSON 字符串（比如普通文本、HTML 片段）→ 同样 SyntaxError
建议先做基础判断：
const raw = localStorage.getItem('userPrefs');if (!raw || typeof raw !== 'string') {
return null;
}
用 try/catch 包裹 JSON.parse() 是必须动作
即使字符串非空，也不能保证它是合法 JSON。必须捕获 SyntaxError：
立即学习“Java免费学习笔记（深入）”；
try {const data = JSON.parse(raw);
// 可选：进一步检查是否为对象或数组
if (data && typeof data === 'object') {
return data;
}
} catch (e) {
if (e instanceof SyntaxError) {
console.warn('localStorage 中 JSON 格式错误:', 'userPrefs');
return null;
}
throw e;
}
避免自动 fallback 到默认对象
不要写成 JSON.parse(raw) || {} 或 ?? {}。这会掩盖真实问题：
- 如果本该是数组却解析失败，fallback 成空对象会让后续
.map()报错 - 如果数据被意外覆盖成字符串
"loading"，静默转为空对象会误导业务逻辑 - 应明确区分“无数据”“数据损坏”“格式不匹配”三种状态
可复用的安全解析函数
封装一个带语义的工具函数，便于统一处理：
function safeParseFromStorage(key) {const raw = localStorage.getItem(key);
if (!raw || typeof raw !== 'string') return null;
try {
const parsed = JSON.parse(raw);
return (parsed && typeof parsed === 'object') ? parsed : null;
} catch {
return null;
}
}
// 使用：
const prefs = safeParseFromStorage('userPrefs');
