Tengo lo siguiente construido con TailwindCSS y AplineJS. Cuando se cambia la palanca, se guarda el almacenamiento local correctamente. Pero cuando la página se actualiza, el almacenamiento local se pega y es correcto, pero el interruptor pasa a la etapa predeterminada.
Pregunté en la página de ayuda de Github y amablemente dijeron que necesito usar AlpineJS Persist... https://alpinejs.dev/plugins/persist
Esta es su respuesta.
Es posible que desee considerar usar el complemento Persist https://alpinejs.dev/plugins/persist . Puede ver que el ejemplo maneja este caso y si desea usar localStorage directamente, simplemente puede configurarlo en x-init.
En x-init, solo obtendría el valor del almacenamiento local y lo configuraría si es así
Bueno, no sé cómo armar esto, soy nuevo en el desarrollo e incluso más nuevo con Alpine. Estaría muy agradecido si alguien me puede señalar en la dirección correcta.
Muchas gracias.
https://codepen.io/williamharvey/pen/xxXaJgM
<div class="flex w-full items-center bg-gray-100 border-b border-gray-200 px-5 py-3 text-sm" x-data="{ cookieConsent1: localStorage.getItem('cookieConsent1') === 'true'} " x-init="$watch('!cookieConsent1', val => localStorage.setItem('cookieConsent1', val))"> <div class="flex-1"> <p>Cookies that remember your settings</p> </div> <div class="w-10 text-right"> <button type="button" class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 bg-gray-200" x-data="{ on: true }" @click="on = !on;cookieConsent1 = !cookieConsent1" x-state:on="Not Enabled" x-state:off="Enabled" :class="{ 'bg-green-400': on, 'bg-gray-200': !(on) }"> <span class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-0" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }"></span> </button> </div> </div>El complemento Persist es un envoltorio delgado alrededor de localStorage , recomiendo leer su código fuente , son solo unas pocas líneas de código y es fácil entender lo que está sucediendo.
Modifiqué tu ejemplo para usar el complemento:
<div class="flex w-full items-center bg-gray-100 border-b border-gray-200 px-5 py-3 text-sm" x-data="{ cookieConsent1: $persist(false) }"> <div class="flex-1"> <p>Cookies that remember your settings</p> </div> <div class="w-10 text-right"> <button type="button" class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 bg-gray-200" @click="cookieConsent1 = !cookieConsent1" :class="cookieConsent1 ? 'bg-green-400' : 'bg-gray-200'"> <span class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-0" :class="cookieConsent1 ? 'translate-x-5' : 'translate-x-0'"></span> </button> </div> </div> Veamos cómo funciona. El punto clave es el cookieConsent1: $persist(false) en el atributo x-data . En la primera ocasión, hace que AlpineJS cree una variable "normal" llamada cookieConsent1 y simultáneamente una variable llamada _x_cookieConsent1 en el almacenamiento local (la _x_ es el prefijo predeterminado para evitar la colisión de nombres). Inicialmente utilizará el valor predeterminado proporcionado: false .
El complemento persistente también crea un observador para la variable cookieConsent1 , que actualiza el valor de la variable dentro del almacenamiento local cada vez que cambia cookieConsent1 .
Digamos que hacemos clic en el botón una vez, por lo que la variable se vuelve true . El módulo persistente actualiza el valor en el almacenamiento local, por lo que ahora también es true . Si actualizamos la página, AlpineJS y el módulo de persistencia detectarán que tenemos una variable _x_cookieConsent1 en nuestro almacenamiento local que corresponde a la variable cookieConsent1 AlpineJS, por lo tanto, inicializará cookieConsent1 con el valor almacenado en el almacenamiento local en lugar del false predeterminado.
Si abre la consola de desarrollo de su navegador y va a la pestaña Aplicación (o Almacenamiento) y selecciona el Almacenamiento local de la lista, puede ver que la variable _x_cookieConsent1 cambia cada vez que hace clic en el botón.