local storage更新对象数组异常：新增元素后原有旧值消失求助

问题原因分析 #

• 方法拼写错误：document.getElementsById 多了字母s，正确方法是document.getElementById，该错误会抛出异常，直接触发catch分支，而catch分支里直接将localStorage的products设为仅包含当前新增项的数组，直接覆盖了原有所有数据，这是旧值消失的核心原因。
• 数组遍历逻辑问题：使用map遍历数组的同时用splice删除原数组元素，会导致数组索引实时变化，出现遍历遗漏的问题，且map本身是用于生成新数组的方法，不适合用来遍历修改原数组，推荐用findIndex查找匹配项索引更高效安全。
• 异常捕获逻辑不合理：当localStorage.getItem("products")返回null时，JSON.parse(null)结果为null，后续调用null.map会抛出异常进入catch，同样会直接覆盖原有数据，需要提前对products做兜底初始化，不要完全依赖catch分支。
• 重复执行存储操作：在map循环里删除元素后就执行了一次localStorage.setItem，后续push新元素后又执行了一次，属于无用的重复操作。

修正后代码 #

addSingleItem = (item) => {
  const [itemName, itemDescription, itemPrice] = item.split("-");
  const btnElem = document.getElementById(`itemName-${itemName}`);

  try {
    // 兜底初始化：本地无数据时默认是空数组，避免后续调用数组方法抛错
    let products = JSON.parse(localStorage.getItem("products")) || [];
    // 查找同名商品的索引
    const existIndex = products.findIndex(product => product.name === itemName);
    
    if (existIndex > -1) {
      // 已存在则删除原有项
      products.splice(existIndex, 1);
      btnElem.innerText = "Add To Cart";
    } else {
      // 不存在则新增当前项
      products.push({
        name: itemName,
        description: itemDescription,
        price: itemPrice
      });
      btnElem.innerText = "Remove From Cart";
    }
    // 所有修改完成后统一更新一次localStorage
    localStorage.setItem("products", JSON.stringify(products));
  } catch(err) {
    // 仅当出现JSON解析等异常时才走兜底初始化逻辑
    const initProducts = [{ 
      name: itemName,
      description: itemDescription, 
      price: itemPrice 
    }];
    localStorage.setItem("products", JSON.stringify(initProducts));
    btnElem.innerText = "Remove From Cart";
  }
}

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