解析LocalStorage返回的undefined值触发JSON.parse报错如何优化处理？

现有写法的不足 #

你当前的三元表达式写法存在两个可优化点：

• 重复调用两次localStorage.getItem，产生不必要的冗余操作
• 未捕获JSON解析异常，如果对应key存储的是非法JSON格式，仍然会抛出运行时错误

方案1：封装通用工具函数（最推荐，覆盖所有边界场景） #

把读取解析逻辑封装成复用函数，一次封装可以在项目所有地方调用，同时处理所有异常情况：

/**
 * 读取并解析localStorage存储值
 * @param {string} key 存储键名
 * @param {any} defaultValue 读取/解析失败时返回的默认值
 * @returns {any} 解析后的存储值
 */
function getLocalStorageItem(key, defaultValue = null) {
  try {
    const rawValue = localStorage.getItem(key);
    // 空值直接返回默认值
    if (rawValue === null || rawValue === undefined) {
      return defaultValue;
    }
    return JSON.parse(rawValue);
  } catch (err) {
    // 解析失败时返回默认值，可根据需求自行添加日志打印逻辑
    console.warn(`localStorage键[${key}]解析失败:`, err);
    return defaultValue;
  }
}

// 调用示例
let resp = getLocalStorageItem('someKey');
// 也可以自定义默认值，比如读取失败时返回空对象
// let resp = getLocalStorageItem('someKey', {});

方案2：单场景简洁写法（无需复用时使用） #

如果只是单次使用不需要封装，可以先把原始值存到变量再处理，避免重复读取storage：

const rawValue = localStorage.getItem('someKey');
let resp = rawValue ? JSON.parse(rawValue) : null;

如果要同时兼容解析异常的情况，也可以直接加try catch包裹：

let resp = null;
try {
  const rawValue = localStorage.getItem('someKey');
  resp = rawValue ? JSON.parse(rawValue) : null;
} catch (err) {
  console.warn('解析localStorage失败', err);
}

内容的提问来源于stack exchange，提问作者user14899645