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:

Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial Código final
Curso Vue en Escuela Vue

¿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.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬