使用localStorage自动更新AlpineJS显示的数据
使用localStorage自动更新AlpineJS显示的数据
提问于 2022-09-09 05:59:32
每次单击按钮时，我都试图使用AlpineJS更新localStorage显示的数据。
我有两个按钮使用setItem更新localStorage中的值。
这一切都有效，但我不知道如何在单击按钮时使用AlpineJS更新显示的数据(使用getItem)。
当单击按钮时，localStorage中的值确实会发生变化，但我必须重新加载页面以更新FE上的数据。
有人能给我一些关于如何用AlpineJS解决这个问题的建议吗？
CodePen
我是AlpineJS新手，我试过这些文档，但我真的不知道如何掌握它。
谢谢您的任何提示
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-09-10 01:51:36
您的方法不起作用，因为localStorage不是反应性的，所以您需要重新加载页面来查看变异状态。您在前端所做的一切都应该使用反应性Alpine.js变量，并使用观察者将这些变量的状态与localStorage同步。此外，Alpine.js还提供了一个插件，因此您甚至不必手动同步它们，只需将一个$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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73663300
复制相关文章
相似问题
腾讯云开发者
