是否可以使用 React 将大型 API 响应存储在浏览器缓存中数天/数周？

Question

我有一个想要获取的端点（不是我自己的端点），但响应的大小为多个 MB，并且可以存储几天甚至一周（为此，假设我想要存放 24 小时）而不会“陈旧”。

如果我想获取端点并将其存储在用户的浏览器缓存中一段时间，即使用户关闭浏览器并在第二天返回，在再次尝试获取端点之前，这可能吗？如果是这样，这样做的方法是什么？我将如何测试/验证它是否按预期工作？

我知道可以手动创建浏览器本地存储，但是该文件对于单个键/值来说太大了，我想避免这条路线，而选择那些不由我的代码“维护”的东西，更多的东西'自动魔法'。我看到 fetch 有一个可以传递的缓存属性，这些选项之一会起作用吗？完整的配置是什么？是否必须以某种方式设置端点才能允许我这样做？

附带/奖励问题。上面提到的端点返回一个包含键/ID 的对象列表以及每个 ID 的信息值/对象。我最初的想法是，我会让我的后端服务器定期提取/存储来自大型端点的响应，然后我会让我自己的 API 返回端点信息的子集（仅用户需要的 ID/信息） 。但是，看起来带有正文的 GET 不是 https 标准的一部分，因此不应该这样做。那么，是否有最佳实践来说明如何将 ID 列表（100 多个 ID，太大而无法成为 URL 的一部分）传递到我的后端 API，以允许 API 将响应减少到仅包含这些 ID 的信息？我可能想/需要在我的项目中同时进行这两项工作。

端点示例（缩短）：

{
  "1": {
    "status": "Active",
    "age": 40,
    "name": "Foo"
  },
  "2": {
    "status": "Inactive",
    "age": 35,
    "name": "Bob"
  },
  "3": {
    "status": "Inactive",
    "age": 30,
    "name": "Bar"
  },...

}

然后我可以传递一个列表，即 ['1','3'] 作为我的获取的一部分，这将允许我用作逻辑的一部分来仅获取 'foo' 和 'bar' 的信息。

React 拒绝在 GET 调用中使用主体，我唯一能做的就是使用带有实际未设置但仅获得响应的主体的 POST。我觉得应该有更好的方法。

Answer 1

好吧，你在一篇文章中提出了多个问题，所以让我尝试在这里分解一下：

1. 缓存大型响应：

   • 您可以将

     Cache API

     与

     fetch

     一起使用。使用

     caches

     全局缓存您的请求和响应对象。然后，在将来的提取中，您可以在发出网络请求之前查看缓存。 https://developer.mozilla.org/en-US/docs/Web/API/Cache

   • 注意：缓存行为也可能由服务器的 HTTP 缓存标头控制，但

     Cache API

     为您提供更直接的控制。

2. 如何测试：

   • 在浏览器中打开 DevTools，转到“应用程序”选项卡，您应该在侧边栏中看到“缓存存储”。您可以检查那里存储的内容。

3. 端点要求：

   • 一般情况下，端点不需要以某种方式设置。更多的是关于客户端代码与缓存 API 正确交互。

4. 额外问题 - 传递大量 ID：

   • 您确实可以使用 POST 请求来发送正文中的大量 ID 列表，而不是 GET。尽管 POST 通常用于创建资源，但将其用于复杂查询并不罕见。
   • 对复杂查询进行 POST 是完全可以的，并且经常被推荐。 HTTP 纯粹主义者可能会有点皱眉，但它很实用并且解决了问题。