具有本地存储的 Alpine JS - x 数据在页面刷新后显示 old/wrong 值

Question

我正在尝试使用 Alpine JS 将值保存在本地存储中来切换暗模式。但是当我再次打开和关闭暗模式并刷新页面时，本地存储中的值显示 'false'（这是预期的）但 x 数据显示错误的值 'true'。

<!-- https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js
<body 
  x-data="{darkMode: localStorage.getItem('dark')}"
  x-init="$watch('darkMode', val => localStorage.setItem('dark', val))"
  x-bind:class="{ 'dark': darkMode }"
>
  
  <p x-show="darkMode">Dark Mode: ON</p>
  <p x-show="!darkMode">Dark Mode: OFF</p>
  
  <button
    @click="darkMode = !darkMode"
  >Toggle Dark Mode</button>
  
</body>

检查此 fiddle 以获取演示：https://jsfiddle.net/darpan_kulkarni/kpr5de0a

开启深色模式
关闭深色模式
刷新页面，还是会显示深色模式开启

如有任何帮助，我们将不胜感激。

Answer 1

本地存储将值存储为纯文本而非布尔值，将 x-data="{darkMode: localStorage.getItem('dark')}" 更改为 x-data="{darkMode: localStorage.getItem('dark') === 'true'}" 解决了该问题。

Answer 2

在大多数浏览器中，localStorage 将所有值存储为字符串。要存储布尔值，您可以将其编码为 JSON，然后在获取该值时，您可以从 JSON.

解码回来

所以你可以改变

x-data="{darkMode: localStorage.getItem('dark')}" 到 x-data="{darkMode: JSON.parse(localStorage.getItem('dark'))}"

和

x-init="$watch('darkMode', val => localStorage.setItem('dark', val))" 到 x-init="$watch('darkMode', val => localStorage.setItem('dark', JSON.stringify(val)))"

具有本地存储的 Alpine JS - x 数据在页面刷新后显示 old/wrong 值

Alpine JS with local storage - x-data showing old/wrong value after page refresh

javascript

local-storage

alpine.js