Estoy tratando de crear una lista de tareas pendientes simple, y mi pregunta es ¿cómo hago para que se muestren todos los elementos de un solo elemento en localStorage?
empujar cosas a localStorage en forma de matriz funciona bien, pero lo único que veo en mi página es el primer índice de la matriz de "tareas".
const inputEl = document.getElementById("inputEl") const submitBtn = document.getElementById("submit") const clearBtn = document.getElementById("clearBtn") const todoListContainer = document.getElementById("todoList") const taskContainer = document.querySelector(".task") const cancelBtn = document.querySelector(".cancelBtn") const doneBtn = document.querySelector(".doneBtn") const errorMsg = document.querySelector(".error") let localStorageContent = localStorage.getItem("tasks") let tasks = [] function createTask(){ if(inputEl.value.length != 0){ const newDiv = document.createElement("div") newDiv.classList.add("task") const newParagraph = document.createElement("p") const newCancelBtn = document.createElement("button") newCancelBtn.classList.add("cancelBtn") newCancelBtn.textContent = "X" const newDoneBtn = document.createElement("button") newDoneBtn.classList.add("doneBtn") newDoneBtn.textContent = "Done" todoListContainer.appendChild(newDiv) newDiv.appendChild(newParagraph) newDiv.appendChild(newCancelBtn) newDiv.appendChild(newDoneBtn) //^^ Creating a container for a new task, with all its elements and assigning the classes^^ tasks.push(inputEl.value) localStorage.setItem("tasks", JSON.stringify(tasks)) inputEl.value = "" newParagraph.textContent = JSON.parse(localStorageContent) errorMsg.textContent = "" }else{ errorMsg.textContent = "You have to type something in!" errorMsg.classList.toggle("visibility") } } submitBtn.addEventListener("click", () =>{ createTask() })Cuando ejecuta JSON.parse(localStorageContent) convierte su cadena en una matriz, así es.
Pero:
newParagraph.textContent = JSON.parse(localStorageContent)es lo mismo que:
newParagraph.textContent = JSON.parse(localStorageContent)[0]Entonces, debe recorrer su matriz JSON.parse (localStorageContent) ... Por lo tanto, cree una nueva variable:
let tasksItem = JSON.parse(localStorageContent)y continúe con el método .forEach