CODEWITHSUNDEEP
javascriptarraysobjectlocal-storageweb-storage
Reena Verma
Reena Verma

Reputation: 1685

localStorage.removeItem() not removing key/value from object

Struggling to figure this one out...

I'm trying to remove a key/value pair, from my localStorage object. However, nothing gets removed. (I also don't have any errors).

I understand I can remove the key/value in question, by it's key name. Here's an example of the object:

   bookMarksArray:    [
        {
            "name": "reena",
            "url": "brian"
        },
        {
            "name": "joe",
            "url": "ault"
        }
       ]

And here's my code... I'm using event target to grab and match the key name, to the object index.

And then passing in key of that object index, into localStorage.removeItem()... What am I doing wrong?

  list.addEventListener('click', event => {
    if (event.target.classList.contains('js-delete-url')) {

      const editName = event.target.parentElement.name.value;
      const objIndex = bookMarksArray.findIndex(obj => obj.name === editName);

      localStorage.removeItem(bookMarksArray[objIndex].name);
      console.log('delete', bookMarksArray[objIndex].name);
    }
  });

Console prints this:

app.js:55 delete reena

Thank you!

Upvotes: 0

Views: 2293

Answers (2)

Sarvesh Mahajan
Sarvesh Mahajan

Reputation: 924

LocalStoage saves the value in string format, so you have to stringify JSON object every time to save it in localStorage, we can solve this problem, please find below code snippet, useful in this scenario,

var updateStorage = function(filterName) {
	var bookMarksArray=   [{"name": "reena", "url": "brian"}, {"name": "joe", "url": "ault"}]
	localStorage.setItem('nameList', JSON.stringify(bookMarksArray));
      var items = JSON.parse(localStorage.getItem('nameList'));
	var updatedList = items.filter(function(a) {
          return a.name !== filterName;
      });
	localStorage.setItem('nameList', JSON.stringify(updatedList));
	console.log(localStorage.getItem('nameList'));
    // result [{"name":"reena","url":"brian"}]
};
updateStorage('joe');

Upvotes: 3

outofworld
outofworld

Reputation: 384

//set js object to localstorage
localStorage.setItem('bookMarksArray',JSON.stringify(bookMarksArray))

//get js object from localstorage
bookMarksArray= JSON.parse(localStorage.getItem('bookMarksArray'))

//remove desired item
bookMarksArray = bookMarksArray.filter(function(item) {
    return item.name !== 'reena';
});

//update js object in localstorage
localStorage.setItem('bookMarksArray',JSON.stringify(bookMarksArray))

Upvotes: 0

Related Questions