CODEWITHSUNDEEP
javascriptlocal-storage
Sathiya D
Sathiya D

Reputation: 13

delete individual items of the array in localStorage

I need to delete individual items of the whole array in localStorage. Is it possible to achieve that. I tried the below code. But its deleting the whole watchlist. I have attached a image of the local storage elements

function removeFromWatchlist(par) {
  localStorage.removeItem("watchList")[par];
}

SEE THIS IMAGE

Upvotes: 1

Views: 477

Answers (3)

Fraser
Fraser

Reputation: 17059

Sure you can, but you need to update the actual stored value - in your example you are removing the entire stored array.

However it would depend on exactly what par is - as you have an array of objects you will have to decide what equal means.

For example.

function removeFromWatchlist(par) {
  const list = JSON.parse(localStorage.getItem('watchList'));
  const test = JSON.stringify(par);
  const result = list.filter(x => JSON.stringify(x) === test);
  localStorage.setItem('watchList', JSON.stringify(result));
}

This would remove all occurrences of whatever par is from the array stored as watchList in local storage.

Upvotes: 2

Sheraff
Sheraff

Reputation: 6702

To understand why this is not working, you need to understand how JS will "read" this piece of code as it's being parsed from left to right:

localStorage.removeItem("watchList")[par]
  1. read the variable called localStorage
  2. read the key removeItem from the above step
  3. call the function from the above step with the argument "watchList"
  4. access the key [par] from the return of the above step

The issue here is that on step 3, the entire value is removed from local storage and the function removeItem returns undefined (https://developer.mozilla.org/en-US/docs/Web/API/Storage/removeItem#return_value).

To make it work, you should find an order of operations that fits your task: you want to modify a value in local storage, so you should:

  1. get that value from localStorage
  2. modify the value from above step
  3. store the modified value in localStorage

Which in code would look something like

const value = localStorage.getItem("watchList") // step 1
const modified = /* write your logic here */ // step 2
localStorage.setItem("watchList", modified) // step 3

Also, don't forget that what is stored into and obtained from localStorage is always a string. So if you're storing objects, you should JSON.parse(value) when reading them with getItem and JSON.stringify(value) when storing them with setItem.

Upvotes: 1

sasi66
sasi66

Reputation: 437

The removeItem() method would remove the whole items of your watchList in local storage, but instead you can find the index of par parameter you are passing and update your watchList array and update it using setItem().

const watchList = JSON.parse(localStorage.getItem('watchList')) || [];
const index = watchList.findIndex(item => item.imdbId === par.imbdId); // in your case imbdId is unique value

if(index !== -1) {
    watchList.splice(index, 1); // removes the item from watchList based on the index
    localStorage.setItem('watchList', JSON.stringify(watchList)); // updateing new watchList
}

Upvotes: 0

Related Questions