在 AngularJS 中持久化大量数据答案

【问题标题】：Persist large amounts of data in AngularJS在 AngularJS 中持久化大量数据
【发布时间】：2015-05-19 18:02:31
【问题描述】：

我有一个非常大的 angularjs Web 应用程序，当你第一次进入网站时它会加载大文件。该站点由几个 SPA 组成，每次用户从一个站点切换到另一个站点时，这些数据都会丢失并且必须重新加载。此外，如果用户按下刷新，数据也会再次加载。

这些数据在用户会话期间不太可能发生变化，因此如果我们能够持久保存它并仅在有更新时重新加载，那就太好了。我知道本地和会话存储，但它们有 5000k 或 10000k 的限制，这还不够。我需要大约 20000k 存储空间。

有什么办法吗？

【问题讨论】：

对于站点应用程序来说，内存中的静态数据量是惊人的。你可以通过异步调用查看关系数据库，但你仍然需要调用来填充它。老实说，听起来您的系统设计不佳..或者不清楚您要实现的目标..可能还有其他选择
如果通过单个http请求加载数据，该请求将被客户端缓存。这会满足您的需求吗？您的 URL 可能类似于 /getdate/ 所以它对于每个会话都是新的。来自文档启用缓存后， $http 将来自服务器的响应存储在指定的缓存中。下次发出相同的请求时，会从缓存中提供响应，而不向服务器发送请求。
@Pogrindis 这个限制可能永远不会被使用，我们的需求可能大约是 7 或 8000k，但对于会话存储来说仍然太多了；这是一个包含大量信息的非常大的网络，因此它的数据量确实惊人
@SteveDrake 我并不真正关心 http 请求，因为正如您所说，这将被客户端缓存，问题在于数据的处理，这可能需要一些时间

【解决方案1】：

几个月前我们遇到了同样的问题，但没有找到有效的解决方案。我们使用了两种解决方法：

使用一个 SPA（将各种 SPA 放在一个超级 SPA 中）。我们有机会这样做。不知道这是否适合您。使用状态而不是 url 进行路由的模块 ui-router 可能会有所帮助。
我们使用分页数据来减少初始加载的大小。

如果您需要大量数据来计算，例如浏览器中的统计信息或渲染图形，请考虑将此计算移至后端。

您还可以使用 http 服务来加载数据并缓存它。但这只是一个选项，如果在会话处于活动状态时数据未更改。

【讨论】：

谢谢，@PeterPaulKiefer，我无法将其移至服务器，此数据仅用于可视化。我会研究 ui-router，但恐怕仍然会留下刷新问题，这在 web 中可能很常见，因为它显示实时信息。
对不起，我想你误会了。 ui-router 唯一有用的是将所有 SPA 放在一个超级 SPA 中。它不会为您提供缓存数据的可能性。但还有另一个想法。是否可以为各个 SPA 打开新的浏览器窗口并在它们之间切换？

【解决方案2】：

是和不是。您可以使用服务器端代码以多种不同方式将 javascript 注入您的页面，因此您不必向服务器发出 ajax 请求来获取数据。例如，如果您使用 php，您可以执行类似的操作

<?php
  $script =  "<script> var Data = $data;</script>";
  echo $script;
?>

然后在您的控制范围内执行类似的操作

$scope.data = Data;

但浏览器并不是为一次性处理大数据而构建的。如果您的数据大于 5MB，您的用户体验将非常糟糕，并且您的应用程序将崩溃。因此，您应该以一种所有数据聚合都将在服务器端处理并将小包发送到客户端的方式来组织数据。

【讨论】：

【解决方案3】：

也许您可以创建一个使用 $http 异步加载数据并将缓存参数设置为 true 的服务，如下所述：How to cache an http get service in angularjs

【讨论】：