JavaScript移除sessionStorage中指定购物车项问题（已解决）

现已解决：sessionStorage→数组→创建不含指定项的新数组→存回sessionStorage

这问题快把我逼疯了，找了一整天解决方案。我想从sessionStorage里移除单个指定项，能定位到该项，但就是删不掉，求帮忙，谢谢。

以下是我写的代码：

function removeCartItem(key) {
    if (sessionStorage.getItem('shopping-cart')) {
        var IsItemThere = false;
        var shoppingCart = JSON.parse(sessionStorage.getItem('shopping-cart'));
        shoppingCart.forEach(function(item) {
            var cartItem = JSON.parse(item);
            if(cartItem.key === key){
                IsItemThere = true;
            }
        });
        if(IsItemThere == true){
            var cartArray = new Array();
            shoppingCart.forEach(function(item) {
                var cartItem = JSON.parse(item);
                if(cartItem.key != key){
                    cartItem = {
                        key: cartItem.key,
                        id: cartItem.id,
                        productName: cartItem.productName,
                        price: cartItem.price,
                        quantity: cartItem.quantity
                    };
                    var cartItemJSON = JSON.stringify(cartItem);
                    cartArray.push(cartItemJSON);
                }
            });
        }
        sessionStorage.removeItem('shopping-cart');
        var cartJSON = JSON.stringify(cartArray);
        sessionStorage.setItem('shopping-cart', cartJSON);
    }
}

每个项的格式如下（弹窗能正常显示）：

{"key":14759,"id":"1","productName":"Sample Product 1","price":"12.77","quantity":"1"}

问题分析及修复方案 #

你的代码有几个关键问题导致移除失败：

• 没找到目标项时，cartArray未初始化，后续存sessionStorage会出问题
• 没必要把每个购物车项单独序列化存储，既繁琐又易出错，直接存对象数组更省心
• 两次遍历完全冗余，一次操作就能完成过滤

优化后的代码：

function removeCartItem(key) {
    const cartStr = sessionStorage.getItem('shopping-cart');
    if (!cartStr) return;

    // 解析成对象数组，兼容原数据中的字符串项
    let shoppingCart = JSON.parse(cartStr);
    // 直接过滤掉目标项，生成新数组
    const updatedCart = shoppingCart.filter(item => {
        const cartItem = typeof item === 'string' ? JSON.parse(item) : item;
        return cartItem.key !== key;
    });

    // 把更新后的数组存回sessionStorage
    sessionStorage.setItem('shopping-cart', JSON.stringify(updatedCart));
}

优化说明 #

• 用filter方法一步完成过滤，替代原有的两次遍历，代码更简洁高效
• 兼容了原数据中每个项是字符串的情况，建议后续存购物车时直接存对象数组，无需单独序列化每个项
• 去掉了冗余的存在性判断，就算没找到目标项，过滤后的数组和原数组一致，存回去不会有异常
• 用const/let替代var，符合现代JavaScript规范

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