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

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
– Sole, Commented Jul 21, 2020 at 15:02
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
– Heretic Monkey, Commented Jul 21, 2020 at 16:39

Devchris · Accepted Answer · 2020-07-21 14:24:22Z

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

edited Jul 21, 2020 at 14:24

answered Jul 21, 2020 at 14:09

Devchris

4124 silver badges13 bronze badges

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

2 Comments

Sole Over a year ago

That deletes the entire array from localStorage, what I want is to click on individual items and delete them?

Devchris Over a year ago

Updated my answer for you @Sole

Raytho · Accepted Answer · 2020-07-21 14:19:20Z

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

answered Jul 21, 2020 at 14:19

Raytho

2053 silver badges14 bronze badges

4 Comments

Sole Over a year ago

Why would I need to split the Array if it is already like ["Monday", "Tuesday", "Wednesday"]

Sole Over a year ago

Also the above is giving Uncaught TypeError: displayItems.split is not a function

Raytho Over a year ago

The first and second chunk of code here are copied from your original post, only the third one is a proposition

Ruan Mendes Over a year ago

You need to serialize the array before storing it localStorage.setItem('shoppingList', JSON.stringify(newShoppingList);

Minal Shah · Accepted Answer · 2020-07-21 14:26:14Z

1

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.

edited Jul 21, 2020 at 14:26

answered Jul 21, 2020 at 14:14

Minal Shah

1,4861 gold badge7 silver badges13 bronze badges

1 Comment

Sole Over a year ago

So I need to split out the localStorage array and then access the index? Can you show some code?

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related