Cuando construyes una aplicación de lista de tareas, llega un momento crítico: los datos desaparecen cada vez que refrescas la página. Para resolver este problema existe una herramienta integrada en el navegador que permite almacenar información de manera persistente sin necesidad de una base de datos. A continuación se explica paso a paso cómo implementar esa solución.
¿Qué es una API y cómo se relaciona con el navegador?
Una API (Application Programming Interface) es un conjunto de reglas y definiciones que permite que diferentes programas de software se comuniquen entre ellos [01:00]. Funciona como un intermediario: si quieres obtener información de un servicio externo como Facebook, esa plataforma te proporciona una API con los métodos específicos que debes usar y el tipo de datos a los que tienes acceso, como la foto del usuario o su correo electrónico.
Una web API aplica el mismo concepto, pero orientado a las funcionalidades del propio navegador [02:07]. Aquí es donde entra localStorage, una web API que permite almacenar datos en el navegador de manera persistente. Es importante tener claro que localStorage no es una base de datos; su propósito es guardar información clave para que, cuando el usuario regrese, pueda retomar donde se quedó.
¿Cómo funcionan setItem y getItem?
localStorage trabaja con dos métodos fundamentales [02:42]:
- setItem: permite guardar valores en localStorage. Recibe dos parámetros: una clave (el nombre con el que identificas el dato) y el valor que deseas almacenar.
- getItem: permite obtener un valor previamente guardado a partir de su clave.
Estos dos métodos son la base de toda la interacción con localStorage.
¿Cómo guardar tareas en localStorage paso a paso?
La primera función que se construye es storeTaskInLocalStorage, que recibe como parámetro la tarea que se desea guardar [03:30]. Al nombrar funciones y variables, es fundamental ser lo más descriptivo posible para que el código sea legible.
Dentro de esta función se utiliza JSON.parse, un método que convierte una cadena de texto en formato JSON a un objeto o array en JavaScript [04:08]. Se aplica sobre localStorage.getItem('tasks') para recuperar las tareas existentes. Si no hay nada guardado, se inicializa un array vacío usando el operador ||.
javascript
function storeTaskInLocalStorage(task) {
const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
tasks.push(task);
localStorage.setItem('tasks', JSON.stringify(tasks));
}
El método push agrega un elemento nuevo al array existente [04:55]. Después, JSON.stringify convierte el array de vuelta a texto para que localStorage pueda almacenarlo, ya que localStorage solo trabaja con strings [05:20].
¿Dónde se invoca esta función?
La función se llama dentro del EventListener del formulario de tareas, justo después de inyectar el elemento en el DOM y antes de limpiar el valor del input [06:00]. De esta manera, cada vez que el usuario escribe una tarea y presiona Enter, la tarea se muestra en pantalla y se guarda en localStorage simultáneamente.
¿Cómo cargar las tareas guardadas al refrescar la página?
Guardar las tareas es solo la mitad del problema. La otra mitad es recuperarlas cuando la página se recarga. Para eso se crea la función loadTask [07:40].
javascript
function loadTask() {
const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
tasks.forEach(function(task) {
taskList.appendChild(createTaskElement(task));
});
}
Esta función verifica si existen tareas en localStorage. Si el array contiene elementos, recorre cada uno con forEach y ejecuta createTaskElement para generar la estructura HTML correspondiente [08:30]. Luego, con appendChild, inyecta cada tarea en el contenedor padre del DOM.
¿Por qué esta función debe ejecutarse primero?
La llamada a loadTask() se coloca al inicio del archivo JavaScript [09:05]. La razón es simple: al cargar la página, lo primero que debe ocurrir es verificar si hay datos persistentes y mostrarlos antes de que cualquier otra interacción del usuario tenga lugar. Esto garantiza la persistencia de datos, es decir, que la información sobreviva al refresco del navegador.
Una vez implementadas ambas funciones, el flujo completo queda claro: se agregan tareas que se guardan en localStorage, y al refrescar, las tareas reaparecen automáticamente. Si tienes dudas sobre cómo extender esta lógica para también persistir las eliminaciones y ediciones, comparte tu enfoque en los comentarios.
