Persistencia
El objetivo de esta lección es añadir persistencia de datos. Queremos que los favoritos sobrevivan a un refresco o cierre de navegador.
Para ello vamos a utilizar el almacenamiento local del navegador, que tiene una API muy sencilla de utilizar.
Basta con crear un nuevo método llamado updateStorage
dentro de methods
en la instancia Vue.
updateStorage() {
window.localStorage.setItem('favorites', JSON.stringify(this.allFavorites))
}
Ten en cuenta que, como lo que vamos a almacenar es el mapa favorites
del modelo, antes tendremos que transformarlo en JSON (en el almacenamiento local solo se pueden guardar strings) con JSON.stringify
.
Más adelante tendremos que hacer el proceso contrario (transformarlo a objeto nativo).
Hay dos puntos clave en los que queremos trabajar con el almacenamiento local. El primero es cuando añadimos un favorito. El segundo es cuando lo eliminamos. Podemos llamar a updateStorage
desde addFavorite
y removeFavorite
, respectivamente.
addFavorite() {
...
this.updateStorage()
},
removeFavorite() {
...
this.updateStorage()
},
Con esto disponemos una primera fase de persistencia de datos.
Enlaces importantes:
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿Tienes alguna pregunta sobre esta lección de Vue 3 desde cero?
Resuelve todas tus dudas sobre Vue en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.