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

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

• javascript
• arrays

• How are you adding items to "Shopping List"? – Heretic Monkey Commented Jul 21, 2020 at 14:28
• An click event which saves the itemsfunction saveItems(ele) { localStorage.setItem('Shopping List', JSON.stringify(ele)); let displayItems = JSON.parse(localStorage.getItem("Shopping List")); domElements.saveList.innerHTML = displayArray(displayItems); } – Sole Commented Jul 21, 2020 at 15:02
• Please edit your question to include the code. – Heretic Monkey Commented Jul 21, 2020 at 15:11
• Updated the question, thanks – Sole Commented Jul 21, 2020 at 15:14
• 1 There are no arrays in localStorage; only strings. That's why you have things like JSON.stringify and JSON.parse. It's not clear what ele is in your saveItems function. If it's an array of strings, you're set; once you remove the item, just pass the array (sans item) to saveItems. To get the index, use the answers to Javascript - Get position of the element of the array – Heretic Monkey Commented Jul 21, 2020 at 16:39

3 Answers 3

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

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

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.