Estoy tratando de hacer una lista de cosas por hacer. Estoy en medio de un proceso y tengo el siguiente problema:
HTML:
<body> <ul id="list"> </ul> <form action="submit" id="task-form"> <input type="text" placeholder="Type your task here and click 'Add a Task'" id="task-input"> <button type="submit" id="add-button" > Add a Task </button> </form> <template id="template"> <li class="list-item" data-todo-id=""> <label class="list-item-label"> <input type="checkbox" id="checkbox"> <span list-item-text> Task text is here </span> </label> <button type="button"> Delete </button> </li> </template> </body>JS:
let button = document.querySelector('#add-button') let todoInput = document.querySelector('#task-input') let template = document.querySelector('#template') let list = document.querySelector('#list') let LOCAL_STORAGE_PREFIX = 'TO-DO LIST APP' let LOCAL_STORAGE_KEY = `${LOCAL_STORAGE_PREFIX}-todos` let todos = []; let savedTodos = loadTodo(); savedTodos.forEach(renderTodo) button.addEventListener('click', e =>{ e.preventDefault(); let date = new Date; let todo = { name : todoInput.value, complete : false, id : date.valueOf() } todos.push(todo) saveTodo(); renderTodo(todo) console.log(todo) todoInput.value = '' }) function renderTodo(todoName){ let templateClone = template.content.cloneNode(true) let todoText = templateClone.querySelector('[list-item-text]') todoText.innerText = todoName.name list.appendChild(templateClone) } function saveTodo(){ localStorage.setItem(LOCAL_STORAGE_KEY,JSON.stringify(todos)) } function loadTodo(){ return JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || [] }La casilla de verificación no tiene ningún controlador de eventos adjunto, por lo que marcarla o desmarcarla no tendrá ningún efecto en todos. Sin embargo, tiene un error en su código, lo que provocará que todos sus todos guardados anteriormente se eliminen si agrega uno nuevo. Lo de la casilla de verificación, creo que fue una coincidencia.
let todos = []; let savedTodos = loadTodo(); Aquí se están creando dos matrices diferentes, savedTodos contiene las listas de tareas pendientes analizadas desde el almacenamiento local. Y una matriz vacía llamada todos . La lista de todos en SavedTodos también se agrega a dom en la siguiente línea.
Hasta aquí todo bien..
... todos.push(todo) saveTodo(); renderTodo(todo) ... Sin embargo, en su función addTodo (controlador de eventos de agregar botón), cuando agrega una nueva tarea, se agrega a la matriz de todos (actualmente vacía) y luego también se vuelve a escribir en el almacenamiento local. En este punto, los todos existentes se mostrarán en DOM, pero se eliminarán del almacenamiento local. Cuando actualice la página, solo se mostrarán los Todos agregados en la última sesión.
Para solucionar esto, recomiendo fusionar la matriz de todos y los savedTodos , y tener solo uno de esos.
... let allTodos = loadTodo(); allTodos.forEach(renderTodo) // in addTodo function (add button event handler) ... allTodos.push(todo); ... // in saveTodo function localStorage.setItem(LOCAL_STORAGE_KEY,JSON.stringify(allTodos));