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

How to delete a specific item/object in localStorage?

本文关键字：项目 对象 localStorage 何删除 删除      更新时间：2023-09-26

原来我的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中显示信息，并返回错误：

Uncaught TypeError: Cannot read property 'itemId' of null。

那么，现在有没有一种方法可以在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);

所有答案都是对的，但您必须：

  1. 将localStorage中的字符串解析为JSON（您已经这样做了）
  2. 删除您不想要的项目（使用slice（））
  3. 将JSON转换为字符串
  4. 在本地存储中重新设置

因此：

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就是这样工作的

试试这个。

$("#button_delete").on("click", function(e){
  e.preventDefault();
  var items = JSON.parse(localStorage["items"]);
  for (var i = 0; i < items.length; i++) {
     if(items[i].itemId == 3){
       items.splice(i,1);
       break;
     }
  }
})

如果你知道特定项目的key，那么就这样简单明了：

if (localStorage.getItem('key_to_remove') != null)
            localStorage.removeItem('key_to_remove');

本地存储只能包含字符串

因此，首先你必须从本地存储解析项目（就像你现在做的那样）

从中删除你不想要的元素。

再次将其序列化为JSON并存储在本地存储中。

以下是的方法

var items = localStorage["items"];
for (var i =0; i< items.length; i++) {
    var item = JSON.parse(items[i]);
    if (item.itemId == 3) {
        items.slice(i);
        break;
    }
}
// Don't forget to store the result back in localStorage
localStorage.setItem("items", items);

 eliminar(est: string) {
     //estudiantes ES LA KEY
    var items = JSON.parse(localStorage.getItem('estudiantes'));
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
       if(item.id == est){
         items.splice(i,1);
       }     
    }
    items = JSON.stringify(items);
    localStorage.setItem('estudiantes', items);
    this.getAll();
   }
相关文章：