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

Question

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

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

这是他们的回复。

您可能只想考虑使用 Persist 插件 https://alpinejs.dev/plugins/persist。你可以看到这个例子处理了这种情况，如果你想直接使用 localStorage，你可以在 x-init 上设置它。

在 x-init 中，您只需从本地存储中获取值并设置它（如果是）

好吧，我不知道如何将它们组合在一起，我是开发新手，甚至是 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。

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