Tengo una aplicación de práctica de lista de tareas de JavaScript desde cero y pasé horas sobre cómo almacenarla en el almacenamiento local y funciona.
¿Pero no aparece en la página HTML real de la lista de tareas pendientes? He visto algunas respuestas al cargarlo desde (localStorage.getItem & JSON.parse) pero en mi caso todavía no funciona.
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) || [] }No le dijo a su aplicación que mostrara los datos de tareas pendientes recuperados en la actualización de la página.
En cada actualización de página, debe recuperar sus datos de tareas pendientes de localStorage (lo que ya ha hecho) y recorrer la matriz para mostrar los datos.
Debe usar este código en la variable todos (cuando se realiza la recuperación)
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); });Si evita el comportamiento de clic predeterminado, entonces sería muy bueno. De lo contrario, al hacer clic en cada elemento se actualizará el navegador, lo que no se verá muy bien.
¡Debe renderizar los datos nuevamente después de actualizar!
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) || [] }