如何使用 localStorage 将 Alpine JS Persist 集成到切换器中

Question

我使用 TailwindCSS 和 AplineJS 构建了以下内容。切换切换时会正确保存 localStorage。但是当页面刷新时，本地存储仍然存在并且是正确的，但是切换到默认阶段。

我在 Github 帮助页面询问过，他们友善地说我需要使用 AlpineJS Persist... https://alpinejs.dev/plugins/persist

这是他们的回复。

You might want to just consider using Persist plugin https://alpinejs.dev/plugins/persist. You can see the example handles this case and if you want to use localStorage directly you can just set it on x-init.

In the x-init you'd just get the value from local storage and set it if so

好吧，我不知道如何将它们组合在一起，我是开发新手，对 Alpine 更陌生。如果有人能指出正确的方向，我将不胜感激。

非常感谢。

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>

Answer 1

Persist 插件是 localStorage 的薄包装，我建议阅读 its source code，它只有几行代码，很容易理解发生了什么。

我修改了您的示例以使用插件：

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

让我们看看它是如何工作的。重点是x-data属性中的cookieConsent1: $persist(false)。第一次它让 AlpineJS 创建一个名为 cookieConsent1 的“普通”变量，同时在本地存储中创建一个名为 _x_cookieConsent1 的变量（_x_ 是避免名称冲突的默认前缀） .最初它将使用提供的默认值：false.

persist 插件还为 cookieConsent1 变量创建了一个观察器，它会在每次 cookieConsent1 更改时更新本地存储中变量的值。

假设我们点击按钮一次，所以变量变为 true。 persist 模块更新本地存储中的值，所以现在它也是 true。如果我们刷新页面，AlpineJS 和 persist 模块将检测到我们的本地存储中有一个 _x_cookieConsent1 变量对应于 cookieConsent1 AlpineJS 变量，因此它将用 cookieConsent1 初始化存储在本地存储中的值而不是默认值 false.

如果您打开浏览器的开发控制台并转到应用程序（或存储）选项卡，然后从列表中选择 select localStorage，您可以看到每次单击时 _x_cookieConsent1 变量都会发生变化按钮。

如何使用 localStorage 将 Alpine JS Persist 集成到切换器中

How to integrate AlpineJS Persist onto a toggle using localStoage

javascript

tailwind-css

alpine.js