delete specific item from an array in localstorage

Question

I am trying to use the splice() to delete a specific item in an array stored in local storage. but when I click the delete button, all it does is delete the item from the page but not from local storage. How do I solve this?

let localStorageKey = 'userArray';
if (localStorage.getItem(localStorageKey) === null) {
  userArray = [];
} 
else {
  userArray = JSON.parse(localStorage.getItem(localStorageKey));
}
userArray.forEach((name) => {
  const para   = document.querySelector('p');
  const delBtn = document.querySelector('.delBtn');
  let delTitem = userArray.splice(name, 1);
  delBtn.addEventListener('click', () => {
    para.textContent = '';
    localStorage.removeItem(delTitem);
  });
  para.innerHTML = `${name.firstname} ${name.lastname}`;

1. .splice() changes an array in place; I don't think your approach is a good idea; I personally would use a unique id to identify the item and use .filter() to remove it. 2. the item is not removed from localStorage because you never call .setItem to update it anywhere. — user5734311
– user5734311, Commented Jan 14, 2021 at 22:02
@Chris G the item is not removed from localStorage because you never call .setItem anywhere, do they have to call setItem for it to be removed? It may have been set before. — Countour-Integral
– Countour-Integral, Commented Jan 14, 2021 at 22:04
@Countour-Integral .getItem reads the string stored there, it does not return a reference to an object you can change. In order to update the stored array, you have to stringify it and store it using .setItem — user5734311
– user5734311, Commented Jan 14, 2021 at 22:06
@Chris G My bad, forgot the question was specific to Objects. — Countour-Integral
– Countour-Integral, Commented Jan 14, 2021 at 22:07
@Countour-Integral Doesn't matter; it's the same for strings. Reading one from LS and updating the variable does nothing to the stored string either (even in theory this won't work because afaik strings are immutable, so you'd lose the reference anyway) — user5734311
– user5734311, Commented Jan 14, 2021 at 22:08

SPa · Accepted Answer · 2022-05-14 20:09:54Z

1

I was faced with this same issue, I was encouraged to check @stackoverflow, when I read this post I got a cleared insight on how to delete a specific item in a localstorage with js using foreach loop Here is my code working as I expected it work:

let keys = {"values" : []};

function deleteTask(delButton, taskName) {

    delButton.addEventListener("click", ()=>{

 keys.values.forEach((item, index)=>{

  if(item === taskName){
      keys.values.splice(index, 1);
      localStorage.setItem("tasks", keys values);
     }
   });

}); }

@Ekankam, @Chris G...

answered May 14, 2022 at 20:09

SPa

418 bronze badges

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

Comments

Da Mahdi03 · Accepted Answer · 2021-01-14 22:08:31Z

0

Try re-storing the item by stringifying it once more, and calling .setItem should so the trick if the rest of your code is working for you. Then it will save your new array without the deleted value into the localStorage

answered Jan 14, 2021 at 22:08

Da Mahdi03

1,6081 gold badge12 silver badges19 bronze badges

Collectives™ on Stack Overflow

delete specific item from an array in localstorage

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related