Qué vas a construir
Una lista de ideas en la que puedes añadir una tarea, marcarla como terminada y eliminarla. El navegador conserva la lista cuando recargas la página.
Necesitas un navegador moderno y un editor de texto si quieres construir tu propia versión. Este ejercicio guarda información únicamente en el dispositivo en el que lo abres.
Las tres piezas
- Un formulario para escribir una idea.
- Un arreglo que representa la lista.
- Una función que dibuja la lista y guarda los cambios.
Guardar y recuperar
localStorage almacena texto. Para guardar un arreglo, lo conviertes a JSON. Para recuperarlo, conviertes ese texto otra vez a datos:
const key = 'mis-ideas';
const ideas = [{ title: 'Construir un proyecto', done: false }];
localStorage.setItem(key, JSON.stringify(ideas));
const restored = JSON.parse(localStorage.getItem(key) || '[]');Al dibujar el título de una idea en la página, usa textContent. Así el navegador lo muestra como texto, incluso si contiene caracteres de HTML.
Qué ocurre al cambiar algo
Después de añadir, completar o eliminar una idea, actualizas los datos, vuelves a dibujar la lista y guardas el arreglo. También debes contemplar que el navegador pueda bloquear el almacenamiento y comunicarlo al usuario.
Comprueba el resultado
Abre el experimento del tablero, añade dos ideas y marca una como terminada. Recarga la página: la lista debería conservarse. Después puedes eliminar una idea o borrar el tablero completo.
El almacenamiento local pertenece a ese navegador. No es una copia de seguridad ni sincroniza información con otros dispositivos. El experimento permite exportar tus ideas a un archivo JSON.