电商项目中如何编辑localStorage内已有商品的数量，避免重复创建条目？

我正在完成一个课程电商项目，通过API获取商品数据。在商品页面编写了以下JavaScript代码，实现颜色选择、数量选择的监听，以及加入购物车的功能：

}

let colors = document.querySelector("#colors");

colors.addEventListener('change', (event) => {
  console.log(colors.value);
});

let quantity = document.querySelector("#quantity");

quantity.addEventListener('change', (event) => {
  console.log(quantity.value);
});

let submit = document.getElementById('addToCart');

submit.onclick = () => {
  var basketItem = {
    productname     : `${productname}`,
    productcolor    : colors.value,
    productquantity : quantity.value,
  }
  console.log(basketItem);
  checkStorage()
  //Check if local storage is empty
  function checkStorage() {
    if (localStorage.getItem(`${productname}` + colors.value) === null) {
      const local = localStorage.setItem(`${productname}` + colors.value, JSON.stringify(basketItem));
    } else {
      console.log("this product is already in basket");
      //> add current quantity value to it's quantity
      // HERE
    }
  }
}

例如，当我将5个黑色的‘Kanap Sinopé’加入购物车后，localStorage中存储的数据如下：

{productname: "Kanap Sinopé", productcolor: "Black", productquantity: "5"}
productcolor: "Black"
productname: "Kanap Sinopé"
productquantity: "5"

目前已实现判断商品是否已存在于localStorage中的逻辑，但希望在再次点击“加入购物车”时，编辑该商品在localStorage中的数量，而非创建新条目，请问该如何实现？

解决方案 #

要实现数量累加，只需在else分支中完成以下操作：

1. 从localStorage取出已有商品数据
2. 将JSON字符串转换为JavaScript对象
3. 把现有数量和新选择的数量转成数字后相加
4. 更新对象数量值，重新存回localStorage

修改后的完整代码如下：

}

let colors = document.querySelector("#colors");

colors.addEventListener('change', (event) => {
  console.log(colors.value);
});

let quantity = document.querySelector("#quantity");

quantity.addEventListener('change', (event) => {
  console.log(quantity.value);
});

let submit = document.getElementById('addToCart');

submit.onclick = () => {
  var basketItem = {
    productname     : `${productname}`,
    productcolor    : colors.value,
    productquantity : quantity.value,
  }
  console.log(basketItem);
  checkStorage()
  
  function checkStorage() {
    const storageKey = `${productname}${colors.value}`;
    const existingItem = localStorage.getItem(storageKey);
    
    if (existingItem === null) {
      localStorage.setItem(storageKey, JSON.stringify(basketItem));
    } else {
      console.log("this product is already in basket");
      // 解析现有商品数据
      const parsedItem = JSON.parse(existingItem);
      // 累加数量（转成数字避免字符串拼接）
      const newQuantity = parseInt(parsedItem.productquantity) + parseInt(basketItem.productquantity);
      // 更新数量并转回字符串（保持原有数据类型一致）
      parsedItem.productquantity = newQuantity.toString();
      // 重新存回localStorage
      localStorage.setItem(storageKey, JSON.stringify(parsedItem));
    }
  }
}

关键说明： #

• 提取storageKey变量，避免重复拼接，提升代码可读性
• 使用parseInt转换数量类型，防止出现"5+3"变成"53"的字符串拼接问题
• 可根据需求选择将数量存为数字或字符串类型，上述代码保持了原有字符串格式

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