如何从 JavaScript 中的 LocalStorage 和更新 UI 中删除数组项？

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 indexOf or 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

Answer 1

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));

Answer 2

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);

Answer 3

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.