javascript - 缓存失效和同步 Angular/后端

Question

简介:

我在后端有一个复杂而持久的查询，在前端反馈 Angular 应用程序。

目前，angular 应用程序使用后端的缓存数据，而不是直接从复杂的查询中读取数据，这需要几分钟时间。缓存每天早上和晚上都会变暖。

当用户对 UI 进行更改并保存数据时，这些数据会传递到服务器端并保存到数据库中。那时 UI 是最新的，直到用户刷新页面。同时数据库是最新的，但缓存是陈旧的。

因此，当用户刷新页面时，过时的缓存值会显示在页面上。

更多信息:

我现在正在考虑刷新缓存的方法，非常欢迎更有经验的人提供任何建议。

我的想法是通过缓存作业(一次一个)刷新缓存，一旦用户保存内容，该作业就会排队。该作业将具有更改的相关信息，并且不必重新计算整个缓存，而只需重新计算更改的位。

问题部分:

即使用户刷新页面，我可以使用什么技术让用户保持最新的数据？我是否应该在客户端以 indexedDB 或 localstorage 的形式保存“deltas”，同时将数据发送到服务器。因此，当页面刷新时，用户从本地存储或索引数据库中读取数据。

我还在考虑这个问题，显然我在这方面没有太多经验，对我到目前为止所采取的方向有何评论？

基本上我可以更改任何东西，包括后端/前端/缓存，它仍处于 POC 阶段，我只是想尽可能了解对其他人有用的东西。

更新

更多的背景。我正在处理类似页面的索引，因此可以内联编辑的记录不止一个。

此外，我还在后端对平面数据库记录进行一些转换，然后将它们转储到类似 map 的结构中，然后以 json 的形式将其传递给前端。

Answer 1

我认为最简单的方法是确保您知道缓存的创建时间。进行更改时，将页面的当前状态与缓存时间一起保存在 localStorage 中。当你加载页面时，你会得到缓存的数据，检查它是否比你的 localStorage 版本更新。如果是，请使用缓存，如果不是，请从 localStorage 重新加载您的数据，因为它已经包含缓存数据和您的更改。