具有本地存储的 Alpine JS - x-data 在页面刷新后显示旧/错误值
[英]Alpine JS with local storage - x-data showing old/wrong value after page refresh
问题描述
I am trying to toggle dark mode using Alpine JS saving the value in local storage.
我正在尝试使用 Alpine JS 切换暗模式，将值保存在本地存储中。 But when I toggle the dark mode on and off again and refresh the page, the value in the local storage shows 'false' (which is expected) but the x-data shows the wrong value which is 'true'.但是，当我再次打开和关闭黑暗模式并刷新页面时，本地存储中的值显示为“假”（这是预期的），但 x 数据显示错误的值是“真”。
<!-- 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>
Check this fiddle for demo: https://jsfiddle.net/darpan_kulkarni/kpr5de0a检查这个小提琴的演示： https://jsfiddle.net/darpan_kulkarni/kpr5de0a
- Turn on the dark mode开启黑暗模式
- Turn off the dark mode关闭黑暗模式
- Refresh the page, it will still show dark mode ON刷新页面，还是会显示暗模式ON
Any help would be appreciated.任何帮助，将不胜感激。
2 个解决方案
解决方案1
0 已采纳 2021-04-05 10:39:14
Local storage stores values as plain text and not boolean, changing x-data="{darkMode: localStorage.getItem('dark')}" to x-data="{darkMode: localStorage.getItem('dark') === 'true'}" solved the issue.本地存储将值存储为纯文本而不是 boolean，将x-data="{darkMode: localStorage.getItem('dark')}"更改为x-data="{darkMode: localStorage.getItem('dark') === 'true'}"解决了这个问题。
解决方案2
0 2021-06-27 18:44:44
In most browsers, localStorage stores all values as Strings.在大多数浏览器中， localStorage将所有值存储为字符串。 To store a boolean value, you could encode it to JSON and then while getting the value, you can decode back from JSON.要存储 boolean 值，您可以将其编码为 JSON，然后在获取该值时，您可以从 JSON 解码回来。
So you could change所以你可以改变
x-data="{darkMode: localStorage.getItem('dark')}" to x-data="{darkMode: JSON.parse(localStorage.getItem('dark'))}" x-data="{darkMode: localStorage.getItem('dark')}"到x-data="{darkMode: JSON.parse(localStorage.getItem('dark'))}"
and和
x-init="$watch('darkMode', val => localStorage.setItem('dark', val))" to x-init="$watch('darkMode', val => localStorage.setItem('dark', JSON.stringify(val)))" x-init="$watch('darkMode', val => localStorage.setItem('dark', val))"到x-init="$watch('darkMode', val => localStorage.setItem('dark', JSON.stringify(val)))"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.