Javascript：从存储在localStorage中的数组中删除对象？

Question

我存储在localStorage的一个数组，看起来像这样：

[ 
    { 
    "location": "westcliff, uk", 
    "stopover": true 
    }, 
    { 
    "location": "westcliff, uk", 
    "stopover": true 
    }, 
    { 
    "location": "southend, uk", 
    "stopover": true 
    }, 
    { 
    "location": "Leigh-on-sea, uk", 
    "stopover": true 
    } 
] 

我有一个按钮，当我点击，它会寻找localtion:数组中，它会从阵列中删除该对象和然后再次存储在本地存储中。

按钮的代码如下所示：

$(document).on('click', ".cart-del", function() { 
    var retrievedObject2 = localStorage.getItem('waypoints'); 
    var parsedObject2 = JSON.parse(retrievedObject2); 
    var result2 = parsedObject2.filter(function(x){return x.location !== "westcliff, uk"; }); 
    var setLoc2 = JSON.stringify(result2); 
    localStorage.setItem('waypoints', setLoc2); 
}): 

这一切工作正常。

，我有是单击按钮时，它会删除所有“westcliff, uk”对象的问题。

什么，我需要做的是只为每次点击删除1个对象！

可能有人请就这个问题咨询？

在此先感谢。

编辑：

我尝试这样做，这不会从数组中删除任何东西：

$(document).on('click', ".cart-del", function() { 

    var retrievedObject2 = localStorage.getItem('waypoints'); 
    var parsedObject2 = JSON.parse(retrievedObject2); 

    for(var i = 0; i < parsedObject2.length; i++){ 
    if(parsedObject2[i].text == "westcliff, uk"){ 
    parsedObject2.splice(i, 1); 
    break; 
    } 
    } 



    var result2 = parsedObject2;  

    var setLoc2 = JSON.stringify(result2); 
    localStorage.setItem('waypoints', setLoc2); 
    }): 

Answer 1

这是由于您使用的是filter，因此无法及早退出，因此可能不适合此用例。相反，您可以使用常规循环。这是一个例子。

var a = [ 
 
    {text : "foo", n : 1 }, 
 
    {text : "foo", n : 2 } 
 
]; 
 
for(var i = 0; i < a.length; i++){ 
 
    if(a[i].text == "foo"){ 
 
    a.splice(i, 1); 
 
    break; 
 
    } 
 
} 
 
console.log(a);

或者使用findIndex了一个更简洁的方法：

var a = [ 
 
    {text : "foo", n : 1 }, 
 
    {text : "foo", n : 2 } 
 
]; 
 

 
a.findIndex((obj, i) => { 
 
    if(obj.text === "foo"){ 
 
    a.splice(i,1); 
 
    return true; 
 
    } 
 
}); 
 

 
console.log(a);

Answer 2

您可以使用find方法而不是过滤方法

parsedObject2.find(function(x,e){ 
    if(x.location == "westcliff, uk") 
    { 
     return x.splice(e,1) 
    } 
});