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

时间:2015-02-06 09:24:02

标签: javascript jquery local-storage

原来我的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); 

6 个答案:

答案 0 :(得分:4)

试试这个。

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

答案 1 :(得分:2)

所有答案都是正确的,但您必须

  1. 将localStorage中的字符串解析为JSON(您这样做了)
  2. 删除您不想要的项目(使用切片())
  3. 将JSON设为字符串
  4. 在localStorage中重新设置
  5. 所以:

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

答案 2 :(得分:2)

如果您知道特定项目的key,请执行以下简短操作:

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

答案 3 :(得分:1)

localstorage只能包含字符串

首先,你必须解析localstorage中的项目(就像你现在这样)

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

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

答案 4 :(得分:1)

这是方法

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

答案 5 :(得分:0)

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