localStorage.removeItem() doesn't work to remove array item

Question

This morning I posted and @Victor solved my problem, but now I have another problem and I haven't been able to solve it since noon.

Link: Show the element saved in localStorage when reload the page

I improved the code by adding the add and remove button. The add add button worked but the remove button doesn't work. Where is my mistake?

<ul id="gfg">
        <li>Computer Network</li>
        <li>Data Structures using C</li>
</ul>

    <input type="text" id="text1">
    <input type="submit" onclick="test()" value="add"></input>
    <input type="submit" onclick="remove()" value="remove"></input>

function getStorageItems() {
    var data = localStorage.getItem('items');
    return data ? JSON.parse(data) : null;
}

function saveStorageItem(text) {
    var array = getStorageItems() || [];
    array.push(text);
    localStorage.setItem('items', JSON.stringify(array));
}

function addItem(text, save) {
    var node = document.createElement('li');
    node.textContent = text;
    document.getElementById('gfg').appendChild(node);

    if (save !== false)
        saveStorageItem(text);
}

function test() {
    a = document.getElementById('texto1').value;
    addItem(a);
}

function remove() {
    a = document.getElementById('texto1').value;
    localStorage.removeItem(a);
}

function loadFromStorage() {
    var array = getStorageItems();
    if (array) {
        for (var i = 0; i < array.length; i++)
            addItem(array[i], false);
    }
}

loadFromStorage();

I want to do this: [enter image description here][1] [1]: https://i.stack.imgur.com/DVOYf.png

You are trying to remove a VALUE in localStorage, but items in localStorage have KEYS associated with them when they get added (you used the key "`items`"), so you have to remove that. — Scott Marcus, Apr 12 '22 at 20:05
but using items i will remove all items, and i just need remove just a specific — Eduardo S, Apr 13 '22 at 00:08

David · Accepted Answer · 2022-04-13T00:52:02.727

Your process of "adding an item" here involves:

Getting the array from storage
Adding the new "item" to the array
Writing the new array to storage

As demonstrated in your code:

var array = getStorageItems() || [];
array.push(text);
localStorage.setItem('items', JSON.stringify(array));

So the process of "removing an item" here would reasonably involve:

Getting the array from storage
Removing the specified "item" from the array
Writing the new array to storage

Which, assuming your array elements are strings, would look something like:

var a = document.getElementById('texto1').value;
var array = getStorageItems() || [];
array = array.filter(function (element) {
  return element !== a;
});
localStorage.setItem('items', JSON.stringify(array));

If, on the other hand, what you really want is to remove the item from local storage entirely, you'd just remove it by its name exactly like you added it by its name:

localStorage.removeItem('items');

(Part of your confusion here probably comes from terminology. You're "adding an item" to local storage, and the "item" you're adding is a "list of items" in your code. Local storage itself already uses the term "item", so call your data something different. Meaningful names make code much easier to understand.)

ty man! But this function doesn't work here. Or idk how to use. im beginner in js, — Eduardo S, Apr 13 '22 at 00:09

localStorage.removeItem() doesn't work to remove array item

1 Answers1