Uso de Local Storage para Guardar Estado de Aplicación Web

¿Cómo usar Local Storage para guardar el estado de una aplicación?

Cuando desarrollamos una aplicación web, mantener el estado a través de las sesiones del usuario es crucial para ofrecer una experiencia consistente. Local Storage es una herramienta poderosa que nos permite guardar datos en el navegador. Esto garantiza que, incluso si el usuario cierra o actualiza la página, los cambios persistan. En la clase analizaremos cómo podemos implementar local storage para mejorar nuestra aplicación, asegurándonos de que todas las modificaciones realizadas por el usuario permanezcan intactas.

¿Por qué usar efectos para manejar el Local Storage?

El uso de efectos en JavaScript es fundamental cuando queremos manejar side effects, aquellos cambios que ocurren fuera de la reactividad y del sistema de renderizado de nuestra aplicación. En este caso, los efectos nos permiten reaccionar automáticamente ante cambios en la aplicación y actualizar el local storage de acuerdo con estos cambios. Esta es la estrategia que seguiremos:

1. Crear un efecto (effect):

   • Usamos la primitiva createEffect para detectar cuando hay cambios en nuestra lista de tareas (todos).
   • Implementamos localStorage.setItem dentro del efecto para almacenar una copia del estado de la lista en el local storage.

   createEffect(() => {
     localStorage.setItem('todos', JSON.stringify(todos));
   });
   

2. Observación de cambios:

   • Los cambios en la lista de tareas desencadenan el efecto, debido a que estas listas funcionan como proxys, con trampas internas.
   • Cada modificación se refleja instantáneamente en el local storage.

¿Cómo inicializar la aplicación con datos almacenados?

Para garantizar que nuestra aplicación empiece con los datos que el usuario dejó guardados la última vez, debemos inicializar el estado con la información del local storage:

1. Recuperar datos del Local Storage:

   • Usamos JSON.parse para convertir los datos almacenados como string en un objeto JavaScript utilizable.
   • Si no hay datos en el local storage, la aplicación debe caer en valores por defecto.

   const todosLocalStorage = JSON.parse(localStorage.getItem('todos')) || [];
   

2. Inicialización del store:

   • Al crear el store de la aplicación, utilizamos todosLocalStorage.
   • Esto nos asegura que cada vez que el usuario vuelva a la aplicación, los datos previos persistan.

¿Cómo recordar la preferencia del modo oscuro?

Guardar la preferencia del modo oscuro es otro aspecto importante, especialmente en términos de experiencia de usuario. Veamos cómo hacerlo:

1. Acceso y almacenamiento del modo:

   • Almacenar la preferencia cada vez que el usuario realiza un toggle del modo oscuro.
   • Comparamos el string almacenado en local storage con "true" para definir el estado inicial.

   const darkMode = localStorage.getItem('darkMode') === 'true';
   

2. Implementar el efecto de cambio:

   • Al igual que con la lista de tareas, crear un efecto ayuda a guardar el estado del modo oscuro.
   • Este efecto también se asegura de que el cambio en la clase del body ocurra paralelamente al cambio en el almacenamiento.

   createEffect(() => {
     localStorage.setItem('darkMode', darkMode.toString());
   });
   

3. Ejemplo de utilización:

   • Cuando el modo oscuro cambia, inmediatamente actualizamos local storage y la interfaz del usuario refleja la elección actual.

Desafíos y mejoras en la aplicación

Finalmente, para aquellos que deseen profundizar en su aprendizaje, se presenta un reto interesante: crear una lista adicional para almacenar solo los elementos marcados como completados. Este ejercicio desafiará tu lógica y consolidará tu entendimiento de temas tratados en el curso. La implementación de dos listas nos invita a utilizar ciclos y a diferenciar señales derivadas. ¡Anímate a probar y continuar aprendiendo mientras estructuras tu aplicación de manera más robusta y dinámica!