I have a JavaScript todo list practice app from scratch and spent hours on how to store it in local storage and it works.

But it does not appear in actual HTML page of todo list? I've seen some answers by loading it from (localStorage.getItem & JSON.parse) but in my case it still doesn't work.

const add = document.getElementById("additem")
const remove = document.getElementById("removeitem")
const input = document.getElementById("inputBlank")
const contain = document.getElementById("container")

const LOCAL_STORAGE_PREFIX = "TODO_APP_V1"
const TODOS_STORAGE_KEY = `${LOCAL_STORAGE_PREFIX}- todos`
const todos = loadTodos() // Load from local storage


/// Appending all
add.addEventListener('click', function () {
    let btn = document.createElement('button');
    let paragraph = document.createElement("th");
    btn.innerText="x";
    btn.style.background="";
    paragraph.innerText = input.value;
    if (input.value === "") return
    todos.push(paragraph.innerText) <---
    input.value = "";
    paragraph.appendChild(btn);
    contain.appendChild(paragraph)
    saveTodos() <---

    todos.push(paragraph.innerText)
    btn.addEventListener('click', function () {
        contain.removeChild(paragraph)
    })
    remove.addEventListener('click', function () {
        contain.removeChild(paragraph);

    })

})

///Saving to local storage
function saveTodos() {
    localStorage.setItem(TODOS_STORAGE_KEY, JSON.stringify(todos))
}

//Getting from local storage
function loadTodos() {
    const todos = localStorage.getItem(TODOS_STORAGE_KEY)
    return JSON.parse(todos) || []
}

CodePudding user response：

You didn't tell your application to show retrieved todo data on page refresh.

On every page refresh, you need to retrieve your todo data from localStorage (which you have already done), and loop through the array to show data.

You have to use this code under the todos variable (when retrieving is done)

todos.forEach((element) => {
  let paragraph = document.createElement("th");
  paragraph.innerText = element;
  let btn = document.createElement("button");
  btn.innerText = "x";
  paragraph.appendChild(btn);
  contain.appendChild(paragraph);
});

If you prevent default on click behavior, then it would be very good. Otherwise, clicking on each item will refresh the browser, which will not look very good.

CodePudding user response：

You need to render the data again after you refreshed!

function loadTodos() {
    const todos = localStorage.getItem(TODOS_STORAGE_KEY)
    
    todos.forEach(function (element) {
        let btn = document.createElement('button');
        let paragraph = document.createElement("th");
        btn.innerText="x";
        btn.style.background="";
        paragraph.innerText = element;

        btn.addEventListener('click', function () {
            contain.removeChild(paragraph)
        })

        paragraph.appendChild(btn);
        contain.appendChild(paragraph);
    })

    return JSON.parse(todos) || []
}