将纯 UI 数据存储在 localStorage(浏览器/机器)或 sessionStorage(浏览器选项卡)中非常有意义，可以降低组件间通信的复杂性。这些存储形式之上的 flux/redux 模式使它变得更好。但这些数据不需要与服务器同步，它只是为了复杂的 UI 目的。
现在，当涉及到确实需要与服务器保持同步的数据时，我有点困惑。导航栏、通知和页脚是可能保存服务器端数据的组件示例，这些数据不会从 SPA 应用程序的 View 中删除。目前我所做的是将这些组件的服务器端数据保存在 localStorage 中，这样我就可以在计时器上运行一个函数，该函数以特定的时间间隔一次刷新所有数据。当用户在应用程序中四处移动时，其他组件会定期创建/更新/销毁，因此它们不会从 localStorage 中提取任何内容(它们在需要时从服务器中提取自己的数据)。
我使用的方法是普遍接受的方法吗？或者从长远来看，是否有更好、更标准的方法来防止这些数据过时？ SPA 的资深人士正在使用的东西。
我能想到的唯一选择是在每个组件或网络套接字中使用长轮询 ajax 调用。我什至不确定任何人以任何方式将服务器端数据存储在 localStorage 中的一般原因是什么，因为我是第一次编写 SPA 应用程序。任何额外的见解都会有所帮助。
最佳答案
我认为没有普遍“接受的方法”。黄金法则是不要过度设计您的代码。相反，当你拥有的任何东西不再工作时，开始简单和重构(你决定什么时候:变得难以维护/难以添加功能等)。话虽如此，您的解决方案似乎是一个好的开始，您不应该考虑太多。
当然，这完全取决于您希望在 localStorage 上存储的数据量和类型。以下是您可以考虑执行的操作:
1。 socket
套接字是您方法的替代方法。您可以自己托管一个套接字服务器(大多数语言都有自己的实现，但是 socket.io 对于 Node 来说是一个非常受欢迎的选择)或者寻求提供客户端套接字 API 的服务。流行的选择是: - firebase - pusher
请注意，使用第三方服务可能会让您陷入困境，这不一定是个好主意。
如果您使用套接字，您还可以在定期创建/更新/销毁的组件中实现它们。套接字将对列表派上用场，但通常您的用户会喜欢在应用程序中随处提供最新数据。
2。带有 indexedDB 的服务 worker
对您的方法的改进可能是使用服务 worker 来进行定期更新。请注意，您将无法使用 service worker 的 localStorage。在这种情况下，您需要切换到 indexedDB 进行存储(support is generally OK)。
如果您想进行更频繁的更新(以提高性能)、需要离线支持或希望保持存储逻辑完全分离，您可以考虑这种替代方案。最重要的是，您将获得 indexedDB 的大量功能。如果你想在本地存储的数据很复杂，你可能想利用它。
但是，这可能是过度设计代码的一个很好的例子，所以除非别无他法，否则请避免使用它。
看看this react boilerplate或 this vue boilerplate对于一些服务 worker 示例。不要认为他们专注于存储位:)
关于javascript - 在 SPA 中，如何防止存储在 localStorage 或 sessionStorage 中的服务器端数据变得过于陈旧？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41205634/