有没有办法将 LocalStorage 与反应变量绑定？答案

【问题标题】：Is there a way to bind LocalStorage with a reactive variable?有没有办法将 LocalStorage 与反应变量绑定？
【发布时间】：2022-01-03 12:37:23
【问题描述】：

我使用LocalStorage 来保存我的 Vue3 应用程序的一些内容。今天，我只是写信给LocalStorage，在特定情况下（间隔或其他触发器）我想保留和从该联系人读取的任何内容更改。

最后一部分不是最优的，因为我需要有复杂的逻辑来处理LocalStorage → 应用更新（LocalStorage 可以通过“其他东西”来更新，这个更新应该反映在应用中）

解决方案是将LocalStorage 的内容与反应变量绑定，这将带来两个优势：

问题 1：这是可能的吗（Vue3 和现代浏览器）？

问题 2：我最近听说 FileSystem 似乎可以替代 LocalStorage，但我不知道它是否更适合解决我的问题有问题吗？

注意：有一个类似的问题 (How to make data from localStorage reactive in Vue js)，但它不包括 Vue3 和FileSystem 的可能使用。答案基本上是“原生不可能。如果仍然如此，我会将其标记为重复。

【问题讨论】：

这通常使用全局存储来完成，因为 LS 也是全局的。并且有适用于 Vuex 等的现成解决方案
@EstusFlask：我确实有一个全局存储（出于其他原因），问题是如何在两者之间进行反应式绑定。
带有 Vuex 插件。它在内部使用storage 事件。
@EstusFlask：我只有 Vuex 的基本知识（我通过阅读文档检查了它是否对我的项目有用） - 如果问题很明显，很抱歉：Vuex 是否在内部管理 LocalStorage改变状态的事件？我在其文档中找不到任何相关内容。
不是。但它拥有一切使之成为可能。例如。 github.com/robinvdvleuten/vuex-persistedstate 有很多类似的 Vuex 问题涵盖了这个

【解决方案1】：

如果我理解你的问题，如果你在一个地方更新 localStorage，它也应该在其他页面上更新。

我从未尝试过，但我可以想到两种方法。

您可以在哪里收听存储事件https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event 这有一些限制，请检查。
创建一个Event 并将其附加到窗口中，并且在您更新 localStorage 时调度自定义事件并在侦听自定义事件时从 localStorage 获取数据。

【讨论】：