Lograr que los cambios de edición persistan tras refrescar la página es uno de los pasos fundamentales al construir un task manager con JavaScript. Aquí se explica cómo crear una función que capture el estado actual del DOM, lo convierta en datos manipulables y lo guarde en localStorage para mantener la persistencia de las tareas editadas.
¿Por qué los cambios de edición no se guardan en localStorage?
Cuando las tareas ya se almacenan en localStorage, al refrescar la página se recupera la última versión guardada. Sin embargo, si editamos o borramos una tarea, esos cambios solo se reflejan en la interfaz visual (el UI), pero no se envían de vuelta a localStorage. Esto significa que al refrescar, se pierde cualquier modificación y vuelve el estado anterior.
Para resolver esto se necesita una función dedicada —en este caso llamada updateLocalStorage— que se ejecute justo después de confirmar una edición. Su trabajo es obtener una "fotografía" del estado actual de las tareas en el DOM y guardarla.
¿Cómo obtener el estado actual de las tareas desde el DOM?
La función updateLocalStorage no recibe parámetros. Lo que hace es consultar directamente el DOM para saber qué tareas existen en ese momento y cuál es su contenido.
¿Qué es un node list y por qué convertirlo en array?
El primer paso es traer todos los elementos <li> que viven dentro del contenedor de tareas [2:48]:
javascript
const task = Array.from(taskList.querySelectorAll('li'));
querySelectorAll('li') devuelve un node list, que es una colección de nodos del DOM.- Un node list no permite operaciones como
.map(), por lo que no se puede iterar de la misma forma que un array.
Array.from() convierte ese node list en un array completamente funcional que ya se puede manipular [4:02].
¿Cómo extraer solo el texto de cada tarea?
Una vez que tenemos el array de elementos <li>, necesitamos obtener únicamente el contenido de texto, no el nodo HTML completo. Para eso se utiliza .map() combinado con firstChild.textContent [4:30]:
javascript
const task = Array.from(taskList.querySelectorAll('li')).map(
(li) => li.firstChild.textContent
);
.map() recorre cada elemento del array y aplica una transformación.firstChild accede al primer nodo hijo del <li>, que contiene el texto de la tarea.textContent extrae el texto plano de ese nodo.
El resultado es un array de strings con el contenido actualizado de cada tarea, incluyendo cualquier edición que se haya realizado.
¿Cómo guardar las tareas actualizadas en localStorage?
Con el array de tareas ya listo, el último paso es enviarlo a localStorage usando setItem y JSON.stringify [5:35]:
javascript
localStorage.setItem('task', JSON.stringify(task));
JSON.stringify() convierte el array en una cadena de texto JSON, que es el formato que localStorage necesita para almacenar datos.setItem('task', ...) asigna ese valor a la clave task dentro de localStorage, sobrescribiendo la versión anterior.
Esta función se invoca dentro de la lógica de edición, justo después de que el nuevo contenido se ha insertado en el DOM [1:20]. De esta manera, cada vez que se confirma una edición, el localStorage se actualiza con la información más reciente.
¿Cómo verificar que funciona correctamente?
Para comprobar el resultado basta con:
- Editar una tarea desde la interfaz.
- Abrir las DevTools del navegador y revisar la sección de localStorage.
- Confirmar que los nuevos valores aparecen reflejados en la clave
task.
- Refrescar la página y verificar que las tareas editadas persisten.
Si al refrescar aparece un valor anterior como taskContent, es probable que exista contenido hardcodeado en el HTML que se carga antes de que localStorage tome el control. Ese detalle se resuelve asegurando que la lectura de localStorage tenga prioridad sobre el HTML estático.
¿Te ha resultado útil esta técnica de sincronización con localStorage? Comparte cómo la estás aplicando en tu propio proyecto.
