当服务器有新数据时更新 localStorage？

Question

登录应用程序 (React.js) 后，我将member数据缓存在 localStorage 中，因为我的许多组件都在使用它，并且请求只需要在登录时完成，理想情况下。

但是，此member对象中的一些属性可能会在后端手动更改，因此前端根本无法知道该member对象是否已更改。（同样，理想情况下，对member对象的任何更改都应该通过一些直接更改数据库的表单提交，通过它可以触发 localStorage 的更新，但目前这不是一个选项。）

示例场景：应用中有一个通用表单来请求额外的积分。客户服务将收到一封关于请求的电子邮件。将为客户 A（在 DB 中）手动更新信用。如果客户 A 没有重新登录（member完成获取请求的地方），localStorage 仍将显示旧的编号。学分。

如果是这种情况，最好的解决方法是什么？

1. 完全不要将member数据存储在 localStorage 中，以保持数据新鲜。只需在需要时调用端点即可。

2. 使用sessionStorage呢？

3. 当用户刷新页面/应用程序时触发重新获取（尽管用户可能不知道他们需要这样做来更新数据）。

建议？

Answer 1

如果数据将基于用户控制之外的事情发生变化，则在需要时调用端点是理想的。会话存储只是在浏览会话结束时被擦除的本地存储，您仍然会遇到完全相同的问题这并不能真正解决问题，并且要求用户执行定期维护任务以最大限度地使用您的应用程序通常是一种糟糕的用户体验我只会让数据新鲜。

Answer 2

在高层次上，您有两个选择：poll（定期调用后端刷新数据）打开到服务器的持久连接（如 Web 套接字），并让服务器将更新推送到客户端。后一种选择需要进行大量更改，并且会改变应用程序的可扩展性，因此前一种选择对您来说似乎是最合理的选择。继续使用是明智的，localStorage这样您就有了数据的离线副本，并且不会在页面加载期间阻止渲染；您可以有一个后台定期刷新过程，在此期间不会中断用户。如果您的数据在诸如 redux 或上下文之类的东西中被镜像，那么如果/当数据发生变化时，您的 UI 可以无缝更新。

Answer 3

如果您不知道何时member更新，请不要存储它。每次需要时都应该查询后端member。这是保持数据与数据库同步的唯一方法。