使用AlpineJS从localStorage自动更新显示的数据

Question

每次单击按钮时，我都试图使用AlpineJS更新localStorage中显示的数据。

我有两个按钮，它们使用setItem来更新localStorage中的值。

这一切都有效，但我不知道如何在单击按钮时使用AlpineJS更新显示的数据(使用getItem(。

单击该按钮时，localStorage中的值确实发生了更改，但我必须重新加载页面以更新FE上的数据。

有人能给我一些关于如何使用AlpineJS解决这个问题的建议吗？

CodePen

CodePen链接

我是AlpineJS的新手，我尝试过文档，但我真的不知道如何掌握它

提前感谢您的任何提示

Answer 1

您的方法不起作用，因为localStorage不是反应性的，所以您需要重新加载页面以查看变异状态。您在前端所做的一切都应该使用反应式Alpine.js变量，并使用观察程序将这些变量的状态与localStorage同步。此外，Alpine.js提供了一个localStorage插件，因此您甚至不必手动同步它们，只需将$persist()放入相应的变量即可：

<!-- Alpine Plugins -->
<script defer src="https://unpkg.com/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{ name: $persist('') }">
<button @click="name = 'Link'">Set name to Link</button>
<button @click="name = 'Zelda'">Set name to Zelda</button>
<div x-text='`Selected name: ${name}`'></div>
</div>