How to use localStorage after the window was been reloaded?

Question

The following code is for creating a list item for the app. 
function createLI(text) {
        function createElement(elementName, property, value) {
            const element = document.createElement(elementName);
            element[property] = value;
            return element;
        }
    function appendToLI(elementName, property, value) {
        const element = createElement(elementName, property, value);
        li.appendChild(element);
        return element;
    }

const li = document.createElement('li');
    appendToLI('span', 'textContent', text);
    appendToLI('label','textContent', 'Confirm')
        .appendChild(createElement('input', 'type', 'checkbox'));
    appendToLI('button', 'textContent', 'edit');
    appendToLI('button', 'textContent', 'remove');
    return li;
}

form.addEventListener('submit', (e) => {
    e.preventDefault();
    const text = input.value;
    input.value = '';

// Checks for empty string in the input area
    if (text === '') {
        alert("You have not entered a name, please try again.");
        return;
    }
    // Checks for duplicate names
    for (i = 0; i < ul.children.length; i++) {
        if (text === ul.children[i].children[0].textContent) {
            alert("This name has already been entered. Please enter a different name.");
            return;
        }
    }

const li = createLI(text);
    ul.appendChild(li);

localStorage.setItem('rsvp', JSON.stringify(ul.outerHTML));

});
As you can see, I have added 
localStorage.setItem('rsvp', JSON.stringify(ul.outerHTML));
to the event handler, and I am now wondering how to actually get the data to show up when the page reloads?
I have tried using
if (localStorage.rsvp) {
        ul.outerHTML = JSON.parse(localStorage.getItem('rsvp'));
}
right after the event handler, but when I reload the page, the buttons on the cards are no longer functional.

Henrik Christensen · Answer

maybe try something like this
```javascript
const rsvp = JSON.parse(localStorage.getItem("rsvp"));
if (rsvp != null) {
    // do something here
}

Welcome to the Treehouse Community

Looking to learn something new?

Andrew Lundy

Andrew Lundy

How to use localStorage after the window was been reloaded?

1 Answer

Henrik Christensen

Henrik Christensen