Estoy creando una aplicación de tareas pendientes en JavaScript vainilla.
Estoy almacenando la identificación y el valor de cada tarea pendiente en el almacenamiento local. Así como un valor booleano que especifica si la casilla de verificación correspondiente de la tarea pendiente se marcó o no.
Esto funciona perfectamente siempre que no se haya hecho clic en ninguna casilla de verificación.
Aquí hay un ejemplo de cómo se ve el almacenamiento local:
"{\"toDo1630557891826\":\"Clean bedroom false\",\"toDo1630557898808\":\"Wash dishes false\"}"Sin embargo, tan pronto como se marca una casilla de verificación, el valor más reciente en el árbol DOM se coloca junto a ambos identificadores de tareas en el almacenamiento local. Por ejemplo, cuando marco ambas casillas de verificación en el DOM.
Esto es lo que quiero decir -
{ToDos: "{\"toDo1630557891826\":\"Wash dishes true\",\"toDo1630557898808\":\"Wash dishes true\"}", length: 1}Creo que la razón por la que esto sucede es porque cuando estoy almacenando los valores de tareas pendientes verificados, solo estoy recuperando el último valor de tareas pendientes en el DOM:
toDoContainer.addEventListener("change", (e) => { const tgt = e.target; const toDo = tgt.parentNode.querySelector('.input'); if (tgt.checked) { toDo.style.textDecoration = "line-through"; toDo.style.opacity = "50%"; isChecked(toDo.value); } else { toDo.style.textDecoration = "none"; toDo.style.opacity = "100%"; isChecked(toDo.value); } });Esta línea de código específicamente está causando este problema:
const toDo = tgt.parentNode.querySelector('.input');Como dije antes, esto está obteniendo el último valor .input (todo). Necesito almacenar el valor correspondiente para cada casilla de verificación marcada sin sobrescribir otros valores de tareas pendientes en el almacenamiento local.
Por lo tanto, necesito almacenar de alguna manera el valor de cada tarea pendiente accediendo al hermano del valor de tarea pendiente de la casilla de verificación.
No estoy seguro de cómo hacer esto.
Aquí está mi codepen para más contexto. Por supuesto, no hay almacenamiento local.
Es probable que debas considerar esto:
toDoContainer.addEventListener("change", (e) => { const tgt = e.target; const chk = tgt.checked; toDo.style.textDecoration = chk ? "line-through" : "none"; toDo.style.opacity = chk ? "50%" : "100%"; saveTodos() }); const saveToDos = () => { // change the global todo object (and make it an array) toDos = [...toDoContainer.querySelectorAll("input[type=checkbox]")].map(todo => { const checked = todo.checked const id = todo.closest("div").id; return { id,completed:checked } }); localStorage.setItem("ToDos", JSON.stringify(toDos)); };