LocalStorage数据覆盖问题：购物车预览仅保留最后一项如何解决？

你每次点击添加按钮时，都用localStorage.setItem('item', markup)把当前商品的HTML直接存到同一个item键下——LocalStorage是键值对存储，同一个键的新值会直接覆盖旧值，所以不管点多少次，最后只会保留最后一次的商品数据。

应该把商品数据存在数组里，每次添加时先读取已有数组，加入新商品后再存回LocalStorage，而不是直接存单个HTML片段。另外，建议存商品的原始数据（比如图片地址、名称）而非HTML，这样更灵活，也方便后续修改渲染样式。

修改后的代码示例：

// 点击添加购物车预览
btnAddCart.forEach(button => {
  button.addEventListener('click', function () {
    // 提取商品核心数据，而非直接生成HTML
    const product = {
      imgSrc: this.parentElement.children[0].src,
      name: this.parentElement.children[1].textContent
    };

    // 读取本地存储的购物车数据，没有则初始化空数组
    let cartItems = JSON.parse(localStorage.getItem('cartPreviewItems')) || [];
    // 添加新商品到数组
    cartItems.push(product);
    // 存回LocalStorage（必须转成JSON字符串）
    localStorage.setItem('cartPreviewItems', JSON.stringify(cartItems));

    // 重新渲染购物车预览
    renderCartPreview(cartItems);
    deleteItem();
  });
});

// 页面加载时渲染已有商品
window.addEventListener('load', function() {
  const cartItems = JSON.parse(localStorage.getItem('cartPreviewItems')) || [];
  if (cartItems.length > 0) {
    clearPreviewText();
    renderCartPreview(cartItems);
  }
});

// 封装渲染购物车预览的函数
function renderCartPreview(items) {
  // 先清空容器，避免重复渲染
  cartPreviewContainer.innerHTML = '';
  // 遍历数组生成HTML
  const markup = items.map(item => `
    <li class="index-preview-list-item">
      <img src="${item.imgSrc}" alt="" />
      <h4 class="product-name">${item.name}</h4>
      <button class="btn btn-delete">
        <i class="fa-solid fa-trash-can"></i>
      </button>
    </li>
  `).join('');
  cartPreviewContainer.insertAdjacentHTML('beforeend', markup);
}

• 用JSON.parse和JSON.stringify处理数组，因为LocalStorage只能存储字符串类型的数据
• 渲染时先清空容器再重新生成所有商品HTML，避免重复添加
• 存商品数据而非HTML，后续如果要修改商品展示样式，只需要改渲染函数即可，不用修改存储逻辑

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