LocalStorage中向数组推送新对象失败，push()方法无法正常工作

你的代码核心问题是每次触发handleChange时，都把existingItems重新初始化为空数组，完全没读取之前存在localStorage里的历史数据，所以每次只能存进去一个新对象，没法累积成[{item}, {item},...]的数组结构。

修正步骤：

• 先从localStorage读取已有的compareItems数据，解析成数组；如果没有数据，就用空数组作为初始值
• （可选）避免重复添加同一产品：用sku这类唯一标识判断当前产品是否已在数组中
• 直接将产品对象添加到数组（不要包成{ products }，否则数组元素会是{products: 产品对象}的嵌套结构，不符合你要的格式）
• 最后把更新后的数组存回localStorage

修正后的代码 #

const handleChange = () => {
  // 读取已有的对比项，无数据则初始化为空数组
  const existingItems = JSON.parse(localStorage.getItem("compareItems") || "[]") as any[];
  
  // 用sku判断是否已存在，避免重复添加
  const isProductExist = existingItems.some(item => item.sku === products.sku);
  if (!isProductExist) {
    existingItems.push(products);
  }
  
  localStorage.setItem("compareItems", JSON.stringify(existingItems));
  // 原有单个产品的存储逻辑可保留，按需使用
  localStorage.setItem("item", JSON.stringify(products));
};

补充：处理取消勾选的逻辑 #

如果需要支持取消复选框时移除对应产品，可以在方法里传入勾选状态，做分支处理：

// 假设通过参数获取复选框的选中状态
const handleChange = (isChecked: boolean) => {
  let existingItems = JSON.parse(localStorage.getItem("compareItems") || "[]") as any[];
  
  if (isChecked) {
    // 勾选时添加并去重
    const isProductExist = existingItems.some(item => item.sku === products.sku);
    if (!isProductExist) {
      existingItems.push(products);
    }
  } else {
    // 取消勾选时移除对应产品
    existingItems = existingItems.filter(item => item.sku !== products.sku);
  }
  
  localStorage.setItem("compareItems", JSON.stringify(existingItems));
  localStorage.setItem("item", JSON.stringify(products));
};

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