Introducción a Alpine.js - Persistir datos en el cliente 22

▶

Lo siguiente que te quiero mostrar es cómo puedes persistir tus datos (en este caso, un todo) en el almacenamiento local del navegador.
Para esto, existen mil formas, sobre todo si empleamos JavaScript nativo. Pero, como en este caso estamos usando Alpine.js, podemos aprovechar un plugin específico para este propósito.

https://www.npmjs.com/package/@alpinejs/persist

Importamos el plugin mediante la cdn o Node importante tal cual indica por acá tienes que incluirla curiosamente antes del color del alpine:

import Alpine from 'alpinejs'
import persist from '@alpinejs/persist'

Alpine.plugin(persist)

O vía la CDN que será nuestro caso:

<script defer src="https://unpkg.com/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>

Estamos con la cdn puedes descargarla y copiarla en el proyecto o lo referencias directamente desde la URL.

Experimento

Vamos a hacer una pequeña prueba.

Definimos una variable count usando el plugin:

count: Alpine.$persist(10),

Si no tenemos ningún error, abrimos las herramientas de desarrollo del navegador, vamos a la pestaña Application > Local Storage, y allí debería aparecer nuestra variable count con el valor 10, que fue el que configuramos inicialmente.

También podrían aparecer otros valores como PayPal, pero no vienen al caso. Lo que nos interesa es justamente el que configuramos.

Es así de fácil.

Probando persistencia

A partir de ahí podemos modificar count a lo largo de nuestra aplicación y no pasará absolutamente nada: se mantendrá persistido.

Por ejemplo, si ahora colocamos:

count: Alpine.$persist(2)

Y volvemos a mirar en el almacenamiento local, veremos el valor actualizado.

Persistiendo arrays: una lista de todos

Ahora vamos a persistir un array, como una lista de tareas (todos).
El proceso es el mismo.

Voy a duplicar el código anterior y comentar lo anterior para que lo tengas como referencia.

Usamos nuevamente el plugin:

todos: Alpine.$persist([])

Recuerda que el símbolo $ hace referencia a que es una variable interna, en este caso, del plugin.

• Definimos el valor de inicialización como un array vacío.
• Regresamos al navegador, y si no hay ningún todo, podemos crear uno.

Ahora, si recargamos la página, veremos que se mantiene el todo que creamos anteriormente.