JavaScript如何删除localStorage中购物车对象内的指定商品

核心问题梳理 #

现有代码存在三个需要调整的点：

• 动态生成的删除按钮没有绑定对应商品的唯一标识，点击时无法识别要删除哪条商品
• 删除按钮的事件绑定代码执行在displaycart()渲染之前，无法选中到动态生成的按钮元素
• 存在笔误：删除按钮的闭合标签写成了</buttton>，多了一个字母t

实现步骤 #

1. 渲染时给删除按钮绑定商品ID #

渲染购物车商品行时，给close按钮添加data-prod-id自定义属性，存储当前商品的唯一ID（也就是productsincart对象的键名）。

2. 用事件委托绑定删除事件 #

直接给商品列表父容器绑定点击事件，判断点击的是删除按钮时触发删除逻辑，不需要单独给每个按钮绑定事件，完美适配动态生成的元素。

3. 编写删除逻辑 #

• 拿到点击按钮对应的商品ID
• 读取本地存储的购物车数据，删除对应ID的商品项
• 重新计算购物车总金额
• 把新的购物车数据和总金额存回localStorage
• 清空现有购物车DOM，重新渲染

完整修改后代码 #

function displaycart() {
    let cartitems = localStorage.getItem("productsincart");
    cartitems = JSON.parse(cartitems) || {};
    let productcontainer = document.querySelector(".products-container");
    let cartcost = localStorage.getItem("totalcost") || 0;
    // 渲染前先清空现有内容，避免重复渲染
    productcontainer.innerHTML = '';
    if (Object.keys(cartitems).length > 0 && productcontainer ) {
        // 同时获取商品ID（对象key）和商品详情
        Object.entries(cartitems).map(([prodId, item]) => {
            productcontainer.innerHTML += `<tr>
                <td><button class="bd" data-prod-id="${prodId}">close</button></td>
                <td>${item.nam}</td>
                <td>${item.price * item.incart}</td>
                <td>${item.incart}</td>
                <td>افزودن</td>
            </tr>`
        });
        let productmab = document.querySelector(".mabb");
        // 先清空再赋值，避免金额重复累加
        productmab.innerHTML = cartcost;
    }
}

// 清空整个购物车逻辑
let bv = document.querySelector(".bv");
bv.addEventListener("click" , () => {
    // 只删除购物车相关字段，避免误删其他业务存储数据
    localStorage.removeItem("productsincart");
    localStorage.removeItem("totalcost");
    window.alert("refresh the page")
})

// 删除单个商品逻辑：事件委托绑定到父容器
document.querySelector(".products-container").addEventListener("click", (e) => {
    // 判断点击的是删除按钮
    if (e.target.classList.contains("bd")) {
        // 拿到要删除的商品ID
        const targetProdId = e.target.dataset.prodId;
        // 读取购物车数据
        let cartitems = JSON.parse(localStorage.getItem("productsincart")) || {};
        // 删除对应商品
        delete cartitems[targetProdId];
        // 重新计算总金额
        let newTotal = 0;
        Object.values(cartitems).forEach(item => {
            newTotal += item.price * item.incart;
        })
        // 存回localStorage
        localStorage.setItem("productsincart", JSON.stringify(cartitems));
        localStorage.setItem("totalcost", newTotal);
        // 重新渲染购物车
        displaycart();
    }
})

displaycart()

注意事项 #

如果你的商品唯一标识不是productsincart的键名，可以把自定义属性的值替换为商品对象里的唯一字段即可。

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