Curso de JavaScript
Dale vida a la web.
Aprende a programar, crea interacciones y construye proyectos reales.
El toque final: que tu lista de tareas recuerde los datos del usuario. Guardas el array completo con JSON.stringify y localStorage, lo recuperas con JSON.parse al cargar, y agregas un mensaje cuando la lista queda vacía.
Explicación
Guardar y recuperar el estado completo une lo aprendido en Arreglos, Objetos y APIs y almacenamiento:
JSON.stringify(tareas)Convierte el array completo de tareas a texto antes de guardarlo, porque localStorage solo acepta strings.
JSON.parse(localStorage.getItem("tareas"))Al cargar, recupera el texto guardado y lo convierte de vuelta en un array real de objetos.
|| [...]Si no hay nada guardado todavía (getItem devuelve null), JSON.parse(null) da null, y || usa una lista de tareas inicial en su lugar.
function guardar()Centraliza el paso de convertir y guardar; se llama después de cada cambio (agregar, completar, eliminar) para que lo guardado nunca quede desactualizado.
Reto rápido
Elimina todas las tareas de la lista, una por una, y confirma que aparece el mensaje "No tienes tareas pendientes 🎉".
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Cualquier cambio en tareas que no pase por guardar() se perdería la próxima vez que se cargue la página: por eso guardar() se llama al final de cada acción, justo antes de render().
Dato extra
En este playground seguimos usando la simulación de localStorage (por las restricciones del sandbox), pero en tu propio proyecto, con el localStorage real del navegador, tus tareas persistirían de verdad al recargar la página o volver más tarde.
Error común
Llamar a render() sin llamar antes a guardar(): la pantalla se actualiza con el cambio, pero nunca se guarda, así que se perdería en cuanto se recargara la página real (fuera de este playground).
Siguiente paso
Tu proyecto ya integra HTML, CSS y JavaScript, y guarda los datos del usuario. Ahora toca la última lección del curso: cómo publicar tu proyecto para que cualquiera pueda usarlo.
Ir a la siguiente lección