如何不使用location.reload()实现购物车总金额与总数量重新计算

这个现象不是正常情况，问题出在你的逻辑执行顺序和索引匹配方式有误，按以下方案修改即可实现无刷新更新购物车统计数据：

• 执行顺序错误：你当前的删除逻辑顺序是「移除DOM → 调用计算函数 → 修改localStorage数据」，你的统计函数大概率是读取localStorage数据计算，调用计算时localStorage还未更新，自然只能拿到旧值，只有刷新页面后才会读取修改后的新数据。
• 索引匹配不准：直接用循环下标i作为localStorage数组的删除索引，一旦DOM顺序和localStorage数组顺序不一致（比如中途新增商品不刷新），就会出现删错商品的问题。
• 事件绑定有残留：页面初始化时给删除按钮绑定的事件，后续新增商品不刷新的话，新商品的删除按钮不会触发事件。

第一步：修改购物车元素生成逻辑 #

在你原来的cartProducts函数生成article节点的代码中，补充颜色自定义属性，用来区分同ID不同颜色的商品：

const cartProducts = (productStorage) => {
  let article = document.createElement('article');
  article.classList.add('cart__item'); 
  article.setAttribute("data-id", productStorage.id);
  // 新增这一行，存商品颜色
  article.setAttribute("data-color", productStorage.color);
  // 剩下的原有逻辑保持不变
}

第二步：重写删除和统计逻辑 #

不用给每个删除按钮单独绑定事件，改用事件委托实现，性能更好也不会漏绑新商品的事件：

// 工具函数：获取最新的购物车本地存储数据
function getCartData() {
  return JSON.parse(localStorage.getItem("products")) || [];
}

// 工具函数：保存购物车数据到本地存储
function saveCartData(data) {
  localStorage.setItem("products", JSON.stringify(data));
}

// 初始化删除事件（页面加载时调用一次即可，后续新增商品不用重新绑定）
function initRemoveEvent() {
  const cartContainer = document.getElementById('cart__items');
  cartContainer.addEventListener('click', (e) => {
    // 仅响应删除按钮的点击
    if (!e.target.classList.contains('deleteItem')) return;
    e.preventDefault();

    // 拿到当前点击商品的标识
    const currentArticle = e.target.closest('article');
    const currentId = currentArticle.dataset.id;
    const currentColor = currentArticle.dataset.color;

    // 1. 先修改本地存储数据
    let cartData = getCartData();
    // 过滤掉要删除的商品
    cartData = cartData.filter(item => item.id !== currentId || item.color !== currentColor);
    saveCartData(cartData);

    // 2. 再移除DOM元素
    currentArticle.remove();

    // 3. 最后调用统计函数，此时读取的是最新数据
    calculateTotal();
    totalArtQte();

    alert("该商品已从购物车移除！");
    // 完全不需要location.reload()
  })
}

// 统计总金额函数示例
function calculateTotal() {
  const cartData = getCartData();
  const totalPrice = cartData.reduce((sum, item) => sum + (item.price * item.quantity), 0);
  // 替换成你页面上总金额对应的节点ID
  document.getElementById('totalPrice').textContent = totalPrice + ' €';
}

// 统计总数量函数示例
function totalArtQte() {
  const cartData = getCartData();
  const totalQuantity = cartData.reduce((sum, item) => sum + item.quantity, 0);
  // 替换成你页面上总数量对应的节点ID
  document.getElementById('totalQuantity').textContent = totalQuantity;
}

第三步：修改初始化逻辑 #

页面加载时，原来的removeItem()调用替换成initRemoveEvent()即可。

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