JavaScript操作sessionStorage存储数组出现新增不生效或重复问题

现有代码问题分析 #

• 方法一错误点：
  1. $.inArray仅能匹配基础类型值，你的cart是对象数组，直接传入商品名字符串和对象做匹配永远返回-1，且判断逻辑写反：应该是未找到匹配商品才新增，你的代码写的是找到才新增。
  2. 遍历到匹配商品后的return仅能跳出$.each的回调函数，无法中断后续的新增逻辑，会同时触发计数+1和新增商品的问题。
  3. 重复调用storeCart()，没必要中途多次存储。
• 方法二错误点：
  1. 循环内只要第一个商品不匹配就触发else新增商品，还没遍历完所有商品就提前执行新增逻辑，必然导致重复添加。
  2. 匹配到商品后调用的value.count未定义，你循环中用的是cart[i]，没有声明value变量，会直接报错。
  3. 循环内重复调用存储方法，逻辑混乱。

修复后完整代码 #

// product构造函数，确保你缺失该定义时也能正常运行
function product(prod, count, price) {
  this.prod = prod;
  this.count = count;
  this.price = price;
}

// 统一封装存储逻辑
function storeCart(cart) {
  sessionStorage.setItem('shopCart', JSON.stringify(cart));
}

$(".prodItem").on("click", ".addCart", function (e) {
  // 读取购物车加兜底，防止sessionStorage清空时报错
  let cart = JSON.parse(sessionStorage.getItem('shopCart')) || [];
  // 取文本用text()+trim()更稳妥，避免拿到多余标签代码导致匹配失败
  let selectedProd = $(e.target).closest('.prodItem').find('.prodName').text().trim();
  let selectedPrice = $(this).siblings('.price').text().trim();
  // 标记位：记录是否找到匹配商品
  let isExist = false;

  // 遍历所有购物车商品找匹配项
  for (let i = 0; i < cart.length; i++) {
    if (selectedProd === cart[i].prod) {
      cart[i].count++;
      isExist = true;
      // 找到后直接跳出循环，不需要继续遍历
      break;
    }
  }

  // 遍历完所有商品都没找到，再执行新增
  if (!isExist) {
    cart.push(new product(selectedProd, 1, selectedPrice));
  }

  // 最后统一存储一次即可
  storeCart(cart);
});

注意事项 #

• 取商品名称、价格这类纯文本内容时，优先用.text().trim()，不要用.html()，如果标签内有嵌套元素，.html()会返回标签代码，导致匹配失败。
• 所有购物车操作完成后统一存储一次即可，不需要中途多次调用存储方法。
• 核心逻辑是先遍历完所有商品确认是否存在，再判断要不要新增，不要在循环内判断不匹配就直接新增。

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