如何从localStorage的对象数组中删除指定对象

我想修改代码实现从localStorage的对象数组里找到并删除指定对象，但试了各种方法要么只删第一个，要么完全删不了。

我试过这些splice调用方式，都没法删除选中的对象：

favorites.splice(favorites, [i]);
favorites.splice(favorites, 1);
favorites.splice(favorites, favorites[i]);

也试过用includes判断，但删除单个对象还是有问题。

附上当前代码：

function checkfave (theid) {

    // get favorites from local storage or empty array
    var favorites = JSON.parse(localStorage.getItem('favorites')) || [];
    
    var theimage = $('#theimage'+theid).attr('src');
    var thetitle = $('#thetitle'+theid).text();
    var theprice = $('#theprice'+theid).text();
    
    var added=true;

        //Loop through the Favorites List and display in console (HIDDEN)
        console.clear();
        

        for (let i = 0; i < favorites.length; i++) {
            
            console.log(i)+'items added';
        
        
                    if ( favorites[i].ID == theid ) { 

                    var answer = window.confirm('You already Added To Your Favorites \r\r '+thetitle+' \r\r Do You Want To Remove It? '); 

                        if (answer) { // choose to remove

                            favorites.splice(favorites[i], [i]);

                            alert(thetitle+' \r\r Has Been Removed From Your Favorites \r\r At Position'+[i]);
                            
                            var added=false; break;     //IMPORTANT KILLS THE LOOP ONLY IF favorites[i].ID == theid
                            
                            }else {
                                   var added=false; break;
                                  }

                    }



        }//for loop


    if (added===true) {
        
        favorites.push({ID:theid,IMAGE:theimage,TITLE:thetitle,PRICE:theprice});
        
        localStorage.setItem('favorites', JSON.stringify(favorites));
        
        alert('You Just Added To Your Favorites \r\r '+thetitle);
    }

console.log(localStorage.favorites);        

}//function 

控制台输出的数组格式：

favorites
    (2) [{…}, {…}]
    0: {ID: 32921, IMAGE: 'uploads/posts/2017-07/1500056645_apulsoft-apqualizr-2.png', TITLE: 'ApulSoft apQualizr 2 v2.5.2 ', PRICE: '19.99'}
    1: {ID: 32920, IMAGE: 'uploads/posts/2022-03/1003229…cdj-lyrx-karaoke-player-software-for-mac-pc-1.png', TITLE: 'PCDJ LYRX v1.8.0.2 / v1.9.0.0 U2B ', PRICE: '19.99'}
length: 2
[[Prototype]]: Array(0)

问题分析与修复 #

1. splice用法错误 #

你之前的splice调用完全搞错了参数格式。Array.splice()的正确语法是：

array.splice(startIndex, deleteCount)

• 第一个参数是要删除元素的起始索引
• 第二个参数是要删除的元素数量

你之前传的参数不符合语法要求，所以无法删除元素。

2. 修复核心逻辑 #

找到匹配ID的元素时，用当前循环的索引i作为起始位置，删除1个元素即可：

favorites.splice(i, 1);

同时，删除后必须把修改后的数组重新存回localStorage，否则刷新页面后数据会恢复原样。

完整修复后的代码 #

function checkfave (theid) {
    // 从localStorage获取收藏列表，没有则为空数组
    var favorites = JSON.parse(localStorage.getItem('favorites')) || [];
    
    var theimage = $('#theimage'+theid).attr('src');
    var thetitle = $('#thetitle'+theid).text();
    var theprice = $('#theprice'+theid).text();
    
    var added = true;

    console.clear();
    
    for (let i = 0; i < favorites.length; i++) {
        console.log(i + ' items added');
        
        if (favorites[i].ID == theid) { 
            var answer = window.confirm('该商品已在收藏夹中\r\r' + thetitle + '\r\r是否要移除？'); 

            if (answer) { 
                // 正确使用splice删除当前索引的元素
                favorites.splice(i, 1);
                // 更新localStorage
                localStorage.setItem('favorites', JSON.stringify(favorites));
                
                alert(thetitle + '\r\r已从收藏夹移除\r\r位置：' + i);
                added = false; 
                break;
            } else {
                added = false; 
                break;
            }
        }
    }

    if (added === true) {
        favorites.push({ID: theid, IMAGE: theimage, TITLE: thetitle, PRICE: theprice});
        localStorage.setItem('favorites', JSON.stringify(favorites));
        alert('已添加到收藏夹\r\r' + thetitle);
    }

    console.log(localStorage.favorites);        
}

额外优化建议 #

可以用findIndex简化查找逻辑，替代手动for循环：

const targetIndex = favorites.findIndex(item => item.ID === theid);
if (targetIndex !== -1) {
    // 执行删除逻辑
    favorites.splice(targetIndex, 1);
    localStorage.setItem('favorites', JSON.stringify(favorites));
}

这样代码更简洁，也不容易出错。

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