Persistencia de datos & Local Storage

En una elección anterior, nosotros hemos agregado un "setTimeout" para agregar un delay a la ejecución de estos request y de esa manera poder verlos progress indicators. Pero como ya tenemos esto implementado y hemos hecho pruebas, vamos a proceder a quitar este time out para no simular, sino más bien mostrar estos indicadores cuando realmente correspondan para conexiones de Internet lentas. Así que ejemplo aquí vamos a presionar Shift F5 para simular que estamos visitando la página por primera vez, ignorando lo que tenemos en la memoria caché del navegador Y ni siquiera llegamos a ver los indicadores de progreso, porque en una conexión de internet rápida, el contenido se descarga instantáneamente. ¿Qué vamos a hacer ahora en este módulo? Si nosotros agregamos al carrito, podemos ir a visualizar el contenido de lo que hemos agregado en esta ruta de "cart" y como vemos, toda la información está aquí. Sin embargo, ¿Qué pasa si nosotros actualizamos la página? Se pierde en lo que habíamos agregado el carrito. Puede ser que estemos haciendo una compra y algunos productos y de pronto por error, actualizamos la página y nuestro carrito estaría nuevamente vacío. Eso es algo que debemos evitar porque no es una buena experiencia de usuario que nuestros datos se pierdan solo por actualizar la página. Por ejemplo, vamos a agregar dos productos y ahora vamos a actualizar desde "cart". Estamos aquí listos para realizar el pedido. Sin embargo, por error actualizamos y se pierden nuestros productos. Por lo tanto, lo que vamos a hacer ahora es que el estado de nuestro "store" del carrito persista. Hay muchas formas de lograr ello. La más común probablemente sea usar el local storage. ¿De qué manera podemos persistir los datos usando el local storage? Como ya comentamos, hay muchas formas de hacerlo. Una alternativa consiste en usar el método Watch Watch, es un método que nos provee "vue" y que nos permite observar cambios en un objeto. Por ejemplo, podemos actualizar nuestro archivo "main" e incluir un código como este de aquí. Este código lo que hace es observar. La traducción de Watch al español es justamente observar. Entonces se observan cambios en "pinia.state" y ante cambios en el "state", por ejemplo, se está invocando al método “set item” de "localStorage". "LocalStorage" es un mecanismo para persistir datos incluso si se refresca la página o si esta se cierra y se vuelve a abrir. Pero el “localStorage” es básicamente un objeto global que nos permite guardar información en pares clave valor. Por ejemplo, aquí se invoca al método “setItem” indicamos una clave, o sea, con qué nombre queremos guardar este item e indicamos el valor para este item. Siempre clave y valor. En este caso se está guardando con el nombre de “counter” el valor de "state.counter”. Entonces si nosotros observamos podemos guardar en el “localStorage” y luego en nuestro “store” cuando vayamos a definir el "state" podemos poner una condición de modo que nuestro estado inicial se lea a partir del “localStorage”. Entonces usaríamos algo como lo siguiente Si “localStorage” contiene un item llamado “counter”, vamos a definir nuestro "state" como “json.parse(localStorage.getItem”. Lo que ocurre aquí es que estamos guardando la información como una cadena y luego estamos parciando esa cadena para que nos dé un objeto o un arreglo, lo que sea que hayamos guardado. Usamos “json.stringify” para guardar como cadena todo este valor y luego usamos json.parse, parsear dicha cadena y obtener el objeto, arreglo o variable que guardamos originalmente. Si usamos este approach, o sea, esta forma de persistir los datos con Watch y con localStorage”, no necesitamos instalar nada porque Watch ya es un método provisto por "vue" y “localeStorage” forma parte de la API de Web Storage que ofrece JavaScript sin instalar ninguna biblioteca. Esta es una alternativa en la que prácticamente estamos haciendo la escritura y la lectura de datos desde "localStorage" manualmente. Hay otra alternativa que consiste en usar "VueUs”. Si agregamos esta dependencia "VueUs" a nuestro proyecto, vamos a poder persistir valores con mucho menos código. La idea es instalar VueUs y luego usarlo de esta manera, cuando vayamos a definir el "state" de nuestro Store, vamos a invocar este método “useLocalStorage”. Este método “useLocalStorage” va a recibir un “key”, una clave como la que se va a guardar en el local storage y un valor por defecto de tal manera que los cambios que se haga van a persistir en el local storage. Y cuando cargue nuestro store por primera vez al refrescar la página, se va a leer desde "localStorage" en base a ésta aquí. Entonces esto internamente implementa algo muy similar a lo que ya tenemos por acá. A la primera alternativa que comentamos. Pero como ya la dependencia se encarga de eso, nosotros solo conseguimos el mismo resultado con una línea. De hecho, hay una tercera alternativa que es usando un plugin. Si nosotros instalamos este plugin de Pinia, podemos luego invocar este método “pinia.use” y pasarle aquí el plugin que hemos instalado y finalmente nuestro estado queda de la misma forma como ya estaba. Pero agregamos un valor booleano indicando que queremos persistir esta data. Si nosotros indicamos “persist:true” a nuestro store, como estamos usando este plugin, ya el plugin internamente se encargará de persistir la data en el local storage. Incluso nos permite configurar esto si no queremos usar local storage y queremos usar otro storage como “sessionStorage”, se puede también personalizar y este plugin ofrece incluso más opciones de configuración. Por ahora nosotros simplemente vamos a hacer uso de VueUs.

Crea una cuenta y continúa aprendiendo 🚀

Persistencia de datos & Local Storage