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);