如何修改或删除localStorage中存储的购物车商品对象？

现有代码核心问题 #

1. 购物车中的商品以 id + 颜色 为唯一标识，你当前的数量修改函数只传入了id，无法匹配到同id不同颜色的商品条目
2. 删除功能没有绑定对应事件，也没有对应的处理逻辑
3. 修改/删除 localStorage 数据后没有重新渲染购物车视图，页面不会同步更新
4. contentBaskets 初始值设为数组但后续用作字符串拼接，属于不规范写法

完整修改方案 #

let basket = JSON.parse(localStorage.getItem("Sofas")) || [];
const cartItems = document.getElementById("cart__items");

// 抽离购物车渲染逻辑，修改/删除数据后重新调用即可刷新页面
function renderCart() {
  cartItems.innerHTML = '';
  let contentBaskets = ''; 
  basket.forEach(item => {
    fetch("http://localhost:3000/api/products/" + item.id)
      .then((response) => response.json())
      .then((data) => {
        contentBaskets += `
          <article class="cart__item" data-id="${item.id}" data-color="${item.color}">
            <div class="cart__item__img">
              <img src="${data.imageUrl}" alt="${data.altTxt}">
            </div>
            <div class="cart__item__content">
              <div class="cart__item__content__titlePrice">
                <h2>${data.name}</h2>
                <p>${data.price}€</p>
              </div>
              <div class="cart__item__content__settings">
                <p>Couleur : ${item.color}</p>
                <div class="cart__item__content__settings__quantity">
                  <p>Qté : </p>
                  <!-- 传id、颜色、输入框实例三个参数，匹配唯一商品 -->
                  <input type="number" class="itemQuantity" name="itemQuantity" min="1" max="100" value="${item.quantity}" onchange="onQuantityChange('${item.id}', '${item.color}', this)">
                </div>
                <div class="cart__item__content__settings__delete">
                  <!-- 给删除按钮加自定义属性存id和颜色 -->
                  <p class="deleteItem" data-id="${item.id}" data-color="${item.color}">Supprimer</p>
                </div>
              </div>
            </div>
          </article>
        `;
        cartItems.innerHTML = contentBaskets;
        // 渲染完成后绑定删除事件
        bindDeleteEvent();
      });
  })
}

// 修改商品数量函数
function onQuantityChange(id, color, input) {
  const newQuantity = parseInt(input.value);
  // 校验数量合法
  if (newQuantity < 1 || newQuantity > 100 || isNaN(newQuantity)) {
    alert('请输入1-100之间的合法数量');
    // 还原为原来的数量
    const originItem = basket.find(item => item.id === id && item.color === color);
    input.value = originItem.quantity;
    return;
  }
  // 找到对应商品修改数量
  basket = basket.map(item => {
    if (item.id === id && item.color === color) {
      return {...item, quantity: newQuantity}
    }
    return item;
  })
  // 存回localStorage
  localStorage.setItem("Sofas", JSON.stringify(basket));
  // 若需要实时更新总价，可在此处添加总价计算逻辑
}

// 绑定删除事件
function bindDeleteEvent() {
  const deleteBtns = document.querySelectorAll('.deleteItem');
  deleteBtns.forEach(btn => {
    btn.onclick = function() {
      const id = this.dataset.id;
      const color = this.dataset.color;
      // 过滤掉要删除的商品
      basket = basket.filter(item => !(item.id === id && item.color === color));
      // 存回localStorage
      localStorage.setItem("Sofas", JSON.stringify(basket));
      // 重新渲染购物车
      renderCart();
    }
  })
}

// 页面加载时首次渲染购物车
renderCart();

功能说明 #

• 所有修改操作都会直接同步到localStorage的Sofas字段
• 数量修改做了合法性校验，避免非法值写入
• 删除操作完成后会自动刷新购物车视图，无需手动刷新页面
• 用id + color作为唯一匹配规则，适配同商品多颜色的购物车场景

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