Angular购物车：检测LocalStorage中是否存在指定ID商品

问题排查 #

你的代码存在几个潜在问题：

• 变量拼写错误：find方法里的参数写成了iteml（小写L），会导致无法正确读取商品ID进行匹配
• JSON解析容错不足：如果LocalStorage中cart的内容不是合法JSON，JSON.parse会抛出错误，中断后续逻辑
• 未校验目标商品合法性：如果当前要判断的item未定义或item.id不存在，整个判断逻辑会失效

修正后的代码 #

// 读取购物车数据并做容错处理
const cartStr = localStorage.getItem('cart');
let cartItems: Array<any> = [];

try {
  // 仅当存在有效字符串时执行解析
  if (cartStr) {
    cartItems = JSON.parse(cartStr);
    // 确保解析结果是数组，避免存储格式错误导致的异常
    if (!Array.isArray(cartItems)) {
      cartItems = [];
    }
  }
} catch (e) {
  console.error('解析购物车数据失败:', e);
  cartItems = [];
}

console.log('当前购物车商品列表:', cartItems);

// 先校验待判断商品的合法性
if (!item?.id) {
  console.error('待判断的商品ID不存在');
  return;
}

// 查找是否存在相同ID的商品
const presentItem = cartItems.find(cartItem => cartItem.id === item.id);

if (presentItem) {
  console.log('该商品已在购物车中');
} else {
  console.log('该商品未在购物车中');
}

优化建议 #

• 给购物车商品定义明确类型，避免使用any：

  interface CartItem {
    id: number | string;
    name: string;
    price: number;
    // 其他商品属性
  }
  let cartItems: Array<CartItem> = [];
  

• 存储购物车数据时，确保存入的是标准JSON数组：

  localStorage.setItem('cart', JSON.stringify([{id: 1, name: '商品A', price: 99}]));
  

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