如何刪除 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 中顯示信息並返回錯誤：

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

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 的工作方式。

Answer 2

試試這個。

$("#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;
     }
  }
})

Answer 3

如果您知道特定項目的key - 像這樣簡短而簡單：

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

Answer 4

localstorage 只能包含字符串

所以首先你必須從 localstorage 解析項目（就像你現在做的那樣）

從中刪除您不想要的元素。

再次將其序列化為 JSON 並存儲在 localstorage 中。

Answer 5

這是方法

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

Answer 6

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