How to delete array item from LocalStorage and Update UI in JavaScript?

Question

So I have an array in my localStorage, what I want to do is give the user the ability to remove items from this array. I have made changes to the UI based on event.target.parentNode. But I want to remove the individual items based on their index from localStorage. Do I need to use indexOfor forEach. My current code does not work, I don't think I have to split the array, so I can access individual items as it is already an array? the function is below - any idea's?
function removeItemsLocalStorage() {
    const listUl = domElements.app.querySelector('.saveUl');
    listUl.addEventListener('click', (event) => {
        if (event.target.tagName == 'BUTTON') {

// below tis to remove the element from the DOM, works ok.
          let li = event.target.parentNode;
          let ul = li.parentNode;
          ul.removeChild(li);

//The code below seems abit iffy to me? as its here I am trying to remove from the index of the array
          let displayItems = JSON.parse(localStorage.getItem("Shopping List"));
          let ele = displayItems.split(",");
          var index = ele.indexOf(1);
          ele.splice(index, 1);
        }
    });
}

localstorage array is like:
["Monday", "Tuesday", "Wednesday"]

Saving to localStorage
function saveItems(ele) {
    localStorage.setItem('Shopping List', JSON.stringify(ele));
    let displayItems = JSON.parse(localStorage.getItem("Shopping List"));
    domElements.saveList.innerHTML = displayArray(displayItems);
}

saveButton.addEventListener('click', function () {
        saveItems(data);
    });

Error when clicking on the removeItemsLocalStorage() function:
Uncaught TypeError: displayItems.split is not a function

Raytho · Answer

let displayItems = JSON.parse(localStorage.getItem("Shopping List"));

Here you are fetching the "Shopping List" item from your local storage, and storing its content inside your displayItems variable.
let ele = displayItems.split(",");
var index = ele.indexOf(1);
ele.splice(index, 1);

Now your local variable ele contains your updated array. But in your localStorage, nothing has changed, and the "Shopping List" is still the same. You need to update that value, for example by doing :
var newShoppingList = ele.join(',');
localStorage.setItem('shoppingList', newShoppingList);

Minal Shah · Answer

If you are storing the value ',' seperated but as a string in local storage, then you have to use split function. This would convert your string into an array.
There is nothing wrong in doing this. According to me this is the optimal way for doing this.
Once you get the list you can use filter method to the array to remove the unwanted element from the list.
Edited:
If it is already stored as array, than you are not required to use split method at all. Already you have the array.
Directly use the splice method to remove the element.
And as you mentioned you need to remove the element by its index, Then just use
array.splice(index,1)

This index would have your desired index.

Devchris · Answer

You can simply delete stuff from local storage by doing:
  localStorage.removeItem('Shopping List');

So what you should do is getting the name of the item you want to delete and pass it to the removeItem function from localStorage. You should not have to loop over the localStorage to remove it by index.
Since in your case the "Shopping List" is an object, the common approach to solve this is by doing splicing it by the index and setting the item again.
list.splice(index, 1);
localStorage.setItem('Shopping List', JSON.stringify(list));

How to delete array item from LocalStorage and Update UI in JavaScript?

3 Answers

Add your own answers!

Ask a Question