Show the element saved in localStorage when reload the page

Question

I'm learning js.

I want to show the saved li with localStorage created with appendChild when I reload the page.

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

<button onclick="test()">Submit</button>

function test() {
    var node = document.createElement('li');
    node.textContent = 'Hi';
    abc = document.getElementById('gfg').appendChild(node);

    //localStorage
    localStorage.setItem('abc', 'abc');
    let a = localStorage.getItem('abc');
    console.log(abc);
}

What do you want to show exactly ? 'abc' or 'Hi' or the node ? — Reynadan, Apr 12 '22 at 12:35
When I clicked one time, create a new "li". And this new "li" created I want to show when I reload the page again. In other words, show the "Hi". — Eduardo S, Apr 12 '22 at 12:37
What is the problem? Seems you have all the required pieces to finish it yourself. A hint: you have to `JSON.stringify` the node because you can't store an 'object' in localStorage, and then `JSON.parse` it back to a node when reading from localStorage. — Ergis, Apr 12 '22 at 12:37
@Ergis I updated with and doesn't work: localStorage.setItem('abc', JSON.stringify(abc)); let a = JSON.parse(localStorage.getItem('abc')); console.log(abc); — Eduardo S, Apr 12 '22 at 12:41
DOM elements cannot be (easily) converted to JSON. You could store an HTML representation of the node in local storage though. — Felix Kling, Apr 12 '22 at 12:44
Just said it on the fly, the emphasis was more on the fact you can't directly store an obj in localStorage. As for the topic, no need to store the 'whole' HTML in the first place, just store the required data, like the text you want to show and build the UI afterwards. — Ergis, Apr 12 '22 at 12:47
Bruh...[How to Store Objects in HTML5 localStorage?](https://stackoverflow.com/questions/2010892/how-to-store-objects-in-html5-localstorage) — Ergis, Apr 12 '22 at 14:44
sorry, I need to show the created node "li" when I clicked on the button to show him — Eduardo S, Apr 12 '22 at 14:46

score 0 · Accepted Answer · answered Apr 12 '22 at 13:50

We can use a pair of functions to work with your items in the storage:

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

With this functions you can save and load an array of text (the text of each li). In the storage, we save a text, this functions also convert/parse your array to a JSON text.

We can create another function to add one li item to your page:

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

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

By default, we save in the storage the text. Only if we pass save=false, we omit the save action. In this form, we can add and save an item and also only add (without saving).

Your test function, in this form, add and save the item:

function test() {
    addItem("Hi");
}

And a last function to load items from storage:

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

Here we use false in addItem because only want add the item, not saving again. You can invoke loadFromStorage to load your saved items.

NOTE: here I only save the text because is the only data required to create your HTML. If you need more data, I suggest you use an object and save/load this serialized object in the same way or the HTML.

Show the element saved in localStorage when reload the page

1 Answers1

Linked