如何使用angular在浏览器内存中缓存图像以避免重复服务器命中？

在angular中，我们有本地存储和会话存储，但它们在容量方面非常有限。是否有任何内置的角度功能来使用浏览器内存或任何其他内存，允许我在用户机器中存储任意数量的数据，以便我可以决定哪些数据应该从服务器中提取，哪些应该从缓存中提取？ 我可以在chrome中看到缓存，但在angular中没有找到关于如何利用它的示例说明。任何演示或教程都会对我有很大帮助

评论中的一些随机IT男孩是正确的，浏览器已经为您做到了这一点，它与Angular无关（不过，web服务器可以通过一些HTTP头更改该行为）。查看文档以了解更多信息（）

你对他的回答是：

由于图像文件是通过api请求获取的，所以浏览器不会停止请求

API请求是简单的HTTP请求，因此它将相应地缓存它们。浏览器不会停止请求。它发出的第一个请求将文件（在您的情况下是图像）存储在磁盘（缓存）上，在后续请求中，浏览器将检查URL的资源是否已存储在缓存中，如果已存储在缓存中，它将使用缓存中的文件，而不会实际到达internet

注意：它将出现在开发工具的“网络”选项卡中，因此您可能会认为它已连接到internet，但如果文件来自磁盘或internet，则应在那里注明文件的来源

如果你需要更多地控制这些情况，你可以做一些事情

您可以使用David提到的IndexedDB，这样您将获得很好的支持，但是需要更多的工作来存储文件，因为这是一个数据库，所以您必须使用它

---

或者，如果您不需要对旧浏览器的支持，您可以使用新的浏览器，它正是为此而设计的。尽管有一些条件（必须从HTTPS运行），但我相信这将是这个用例的未来。它的工作原理是将URL映射到包含要存储的资源的响应（在您的例子中是图像）。在您的情况下，您可以使用HTTP拦截器检查映像是否已在缓存中，如果已在缓存中，请使用先前存储的响应进行响应。

浏览器已经为您完成了这项工作，但显然没有。浏览器永远不会缓存请求。由于图像文件是通过api请求获取的，浏览器不会停止请求。查看IndexedDB浏览器可以并且将基于缓存策略头缓存请求，请查看此。如果您正在发送正确的HTTP缓存策略头，则可以并且将能够缓存来自HTTP端点的Base64编码图像；）。请取消选中开发人员工具上的复选框“禁用缓存”：O