LocalStorage remove item from object using JavaScript

Question

I would like to remove an item from localstorage object:

addToFavs: [{"fav-name":"fav-787336"},{"fav-name":"fav-255890"}]

I stored the information, then I checked if the item found, I should remove it:

/*** getID is the items clicked ***/

var retrievedData = localStorage.getItem("addToFavs");
    
    var parseData = jQuery.parseJSON(retrievedData);

    $.each(parseData, function(x,y){
        if(y['fav-name'] == getID){
            console.log(getID+' found on '+x);
            console.log(parseData[x]);
            localStorage.removeItem(parseData[x]);
            console.log(x+' removed');
        } else {
            console.log(getID+' NOT NOT found on '+x);
        }

}); // end $.each

Thanks in advance

How can I implement it in my code? I tried so many ways but failed — Immo Broker
– Immo Broker, Commented Jun 20, 2020 at 21:10

blex · Accepted Answer · 2020-06-20 21:18:01Z

2

You cannot do this:

localStorage.removeItem(parseData[x]);

You need to either update the array you parsed, or create a new one, and then stringify it back to JSON, and setItem to update the value in localStorage. Because localStorage can only store Strings, not Arrays or Objects.

filter would be a nice way of doing it:

var jsonString = localStorage.getItem("addToFavs");
var arr = JSON.parse(jsonString);
// Filter to keep only those with a different ID than getID
arr = arr.filter(function(item) { return item['fav-name'] !== getID; });
// Store it back, stringified
localStorage.setItem("addToFavs", JSON.stringify(arr));

answered Jun 20, 2020 at 21:18

blex

25.7k6 gold badges48 silver badges78 bronze badges

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

Comments

Davide · Accepted Answer · 2020-06-20 21:24:19Z

1

The value in the local storage is a string
Read the local storage value by the key
Decode the string value
Apply the Array.prototype.filter function to filter the value out of the array
Encode the array value
Write it to local storage using the same key

answered Jun 20, 2020 at 21:24

Davide

2,1242 gold badges26 silver badges43 bronze badges

Comments

pavan kumar · Accepted Answer · 2020-06-20 21:27:05Z

Not to freak you out or something

addToFavs: [{"fav-name":"fav-787336"},{"fav-name":"fav-255890"}]. <---- in this line of code addToFavs is the item in local storage and not the object you stored.

and local storage only supports storage of type string:string as item:value, so

localStorage.removeItem(parseData[x]); <--- this line of code here is trying to look for an item, in your case

which is actually inside your stringified object that itself is value to addToFavs item,

hence you have to remove the item from the object and store the addToFavs again as illustrated below.

var ls = window.localStorage;
ls.setItem('addToFavs', '[{"fav-name":"fav-787336"},{"fav-name":"fav-255890"}]');

var getId = 'fav-787336';

var item = JSON.parse(ls.getItem('addToFavs'));

var updatedItems = item.filter(val => (val['fav-name'] === getId));

console.log(updatedItems);

//update loacl storage again

ls.setItem('addToFavs', JSON.stringify(updatedItems))

the code won't run as localStorage access is not granted dues to security concerns feel free to run code in browser console.

Collectives™ on Stack Overflow

LocalStorage remove item from object using JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related