En esta etapa, nuestra aplicación gestiona las tareas solo en memoria. Esto significa que cada vez que se actualiza la página, se pierde toda la lista de tareas.

Para solucionar esto y asegurarnos de que las tareas se guarden entre sesiones de usuario, utilizaremos Local Storage — una función incorporada en los navegadores que permite almacenar pares clave-valor directamente en el navegador del usuario.

¿Qué es Local Storage?

Los datos almacenados en Local Storage no desaparecen cuando se cierra la página o el navegador; permanecen disponibles incluso después de reiniciar completamente el navegador.

LocalStorage solo almacena datos como cadenas de texto, por lo que al trabajar con objetos o arreglos, es necesario convertirlos usando JSON.stringify() antes de guardarlos y JSON.parse() al recuperarlos.

A continuación se presentan los métodos principales utilizados para interactuar con Local Storage:

Añadiendo almacenamiento local

Para garantizar que nuestras tareas se guarden incluso después de recargar la página, es necesario implementar persistencia utilizando el almacenamiento local del navegador. Esto significa que debes enseñar a nuestro TaskService cómo guardar tareas en el almacenamiento local y cómo cargarlas nuevamente cuando la aplicación se inicie.

Guardar tareas en el almacenamiento local

Primero, se necesita un método que tome nuestro arreglo interno de tareas y lo almacene en el almacenamiento local del navegador.

Así es como se puede hacer:

private saveTasks(): void {
  localStorage.setItem('tasks', JSON.stringify(this.tasks));
}

Este método convierte el arreglo tasks en una cadena JSON utilizando JSON.stringify. Luego, almacena esa cadena en localStorage bajo la clave tasks.

Cada vez que se agrega, elimina o actualiza una tarea, se debe llamar a este método para asegurar que los datos se guarden.

Carga de tareas desde Local Storage

A continuación, se implementará un método que carga la lista de tareas desde Local Storage cuando se inicializa el servicio.

private loadTasks(): Task[] {
  const data = localStorage.getItem('tasks');
  return data ? JSON.parse(data) : [];
}

Este método intenta recuperar un valor de localStorage utilizando la misma clave tasks.

Si los datos existen, analiza la cadena JSON de nuevo en un arreglo de TypeScript. Si no hay nada en el almacenamiento, devuelve un arreglo vacío para comenzar desde cero.

Carga de tareas al inicializar el servicio

Se desea cargar las tareas existentes tan pronto como se crea el servicio. Para ello, se utiliza el constructor del servicio:

constructor() {
  this.tasks = this.loadTasks();
}

Esto garantiza que el arreglo de tareas se llene inmediatamente con cualquier dato previamente guardado cuando la aplicación se inicia.

Versión final de TaskService

Solo queda asegurarnos de que nuestra lista de tareas se guarde en Local Storage cada vez que ocurra un cambio. Esto significa que debemos llamar al método saveTasks al final de los métodos addTask, deleteTask y toggleTask para mantener Local Storage sincronizado con nuestra lista tasks.

A continuación se muestra cómo se ve el TaskService completo con la funcionalidad de almacenamiento local:

Al implementar saveTasks() y loadTasks() en nuestro servicio, hemos permitido que nuestro gestor de tareas conserve los datos entre sesiones. Ahora, cada vez que el usuario agrega, completa o elimina una tarea, esos cambios se almacenan en el navegador y se restauran automáticamente la próxima vez que abra la aplicación.

Esto proporciona a nuestra aplicación una experiencia de usuario mucho más profesional y confiable.