javascript - 如何删除 localStorage 中的特定项目/对象？

Question

原来我的 localStorage["items"] 将我的 JSON 存储为字符串。

"["{\"itemId\":1, \"itemName\":\"item1\"}", "{\"itemId\":2, \"itemName\":\"item2\"}",
"{\"\":3, \"itemName\":\"item3\"}",]"

这是我 JSON.parse(localStorage["items"]) 时的样子:

["{"itemId":1, "itemName":"item1"}", "{"itemId":2, "itemName":"item2"}"
"{"itemId":3, "itemName":"item3"}"]

所以在我的循环中，我使用 jQuery.parseJSON 将它变成了一个对象:

var object = jQuery.parseJSON(item[i]);

现在，我想做的是删除 itemId = 3 的对象，并确保该对象已从 localStorage 中完全删除。

到目前为止，这是我的 Javascript:

$("#button_delete").on("click", function(e){
  e.preventDefault();

  var items = JSON.parse(localStorage.getItem('items'));
    for (var i = 0; i < items.length; i++) {

      var object = JSON.parse(items[i]);
       if(object.request_id == 3){
         console.log(items) 
         delete items[i] // slice doesn't work not sure why
         console.log(items)
       }     
    }

    item = JSON.stringify(items);
    console.log(item);
    localStorage.setItem('items', item);
})

已更新

当我现在点击按钮时，它会删除该项目，但不会删除它前面的逗号。

当我在浏览器中检查 localStorage["items"] 时，它会返回:

"["{\"itemId\":1, \"itemName\":\"item1\"}","{\"itemId\":2, \"itemName\":\"item2\"}",null]"

我有另一个页面将在 html 中显示信息并返回错误:

未捕获的类型错误:无法读取 null 的属性“itemId”。

那么现在有没有一种方法可以在 localStorage["items"] 中专门针对 ,null 检查或搜索并将其删除，这样错误就不会显示了？

关于我如何在 HTML 中显示信息的代码:

    var items = JSON.parse(localStorage.getItem('items'));
    var itemsHTML = "";

    for(var i = 0; i < items.length; i++){

      var object = jQuery.parseJSON(items[i]);

      var displayItemId = object.itemId;
      var displayItemName = object.itemName;

      itemsHTML += "<li id="+displayItemId+">"+displayItemName+"</li>";
    }

    $("#viewItemList").html(itemsHTML); 

Answer 1

所有答案都是正确的，但你必须:

1. 将 localStorage 中的字符串解析为 JSON(你这样做了)
2. 删除不需要的项目(使用 slice() )
3. 将JSON转为字符串
4. 在localStorage中重新设置

所以:

1.

var items = JSON.parse(localStorage.getItem("items")); // updated

2.

for (var i =0; i< items.length; i++) {
    var items = JSON.parse(items[i]);
    if (items.itemId == 3) {
        items.splice(i, 1);
    }
}

3.

items = JSON.stringify(items); //Restoring object left into items again

4.

localStorage.setItem("items", items);

解析为 JSON 并将其存储为字符串有点烦人，但这就是 localStorage 的工作方式。