How to delete a specific item/object in localStorage?

Question

Turns out that my localStorage["items"] stored my JSON as a string.

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

This is what it looks like when I JSON.parse(localStorage["items"]):

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

So in my loop I made it into an object by using jQuery.parseJSON:

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

Right now, what I want to do is delete the object where itemId = 3 and make sure that the object is totally removed from the localStorage.

Here's my Javascript so far:

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

UPDATED

When I click the button now, it will delete that item however it will not delete the comma before it.

When I check the localStorage["items"] in the browser it returns this:

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

I have another page that will display the info in the html and it returns the error:

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

So right now is there a way to check or search in localStorage["items"] specifically for ,null and remove it so that the error won't show?

Code on how I'm displaying the info in 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);

splice() / slice() will to the job :)

enguerranws
– enguerranws

2015-02-06 09:33:11 +00:00
Commented Feb 6, 2015 at 9:33 — enguerranws
– enguerranws, Commented Feb 6, 2015 at 9:33

Heemanshu Bhalla · Accepted Answer · 2018-11-13 08:29:19Z

9

All the answers were right but you have to :

Parse the string in localStorage to JSON (you did that)
Remove the item you don't want (with slice() )
Make the JSON to string
Re-set it in the localStorage

So :

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

Parsing to JSON and storing it as string is kinda annoying, but that's the way localStorage works.

edited Nov 13, 2018 at 8:29

Heemanshu Bhalla

3,8201 gold badge31 silver badges57 bronze badges

answered Feb 6, 2015 at 9:39

enguerranws

8,2338 gold badges53 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

ahfreak Over a year ago

Hi, I've used your method and currently it doesn't work. I've also updated the question to reflect my problem better.

enguerranws Over a year ago

What does the console tells you ? Any errors ? Be sure to put console.log(); to debug values easier. Also, instead of String() try items = items.toString();

enguerranws Over a year ago

By the way, does localStorage['items'] works ? Try using localStorage.getItem('items').

enguerranws Over a year ago

I looked into a project where I worked a lot with localStorage, I was using JSON.stringify() to stringify my JSON array. I updated my answer.

enguerranws Over a year ago

And note you made a confusion between items and item (I choose to only use items as it surely will be an array of elements).

|

skmahawar · Accepted Answer · 2015-02-06 09:28:24Z

5

Try this one.

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

answered Feb 6, 2015 at 9:28

skmahawar

3111 silver badge13 bronze badges

Comments

Jonathan Applebaum · Accepted Answer · 2019-01-21 09:20:46Z

4

If you know the key of the specific item - do it short and simple like this:

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

answered Jan 21, 2019 at 9:20

Jonathan Applebaum

6,0164 gold badges40 silver badges58 bronze badges

Comments

marcinn · Accepted Answer · 2015-02-06 09:29:07Z

1

localstorage can contain strings only

So first you have to parse items from localstorage (like u do now)

Remove from it the element you don't want.

Serialize it to JSON one more time and store in localstorage.

answered Feb 6, 2015 at 9:29

marcinn

1,78611 silver badges13 bronze badges

Comments

kasper Taeymans · Accepted Answer · 2015-02-06 09:38:56Z

1

Here is the approach

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

edited Feb 6, 2015 at 9:38

kasper Taeymans

7,0365 gold badges34 silver badges51 bronze badges

answered Feb 6, 2015 at 9:32

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Comments

Mike Benya · Accepted Answer · 2019-11-12 17:33:46Z

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

answered Nov 12, 2019 at 17:33

Mike Benya

1

1 Comment

shhdharmen Over a year ago

Your answer is not much clear and understood. Could you please elaborate further? Or read this for more info: stackoverflow.com/help/how-to-answer

Collectives™ on Stack Overflow

How to delete a specific item/object in localStorage?

6 Answers 6

9 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

9 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related