将大响应放入缓存存储时出现“DOMException：找不到条目”

Question

在Cache Storage 中存储视频时遇到问题。如果视频尺寸较小，它可以正常工作，但如果它的尺寸约为 100MB，我会收到此错误：

DOMException: Entry was not found.

我使用以下代码：

fetch(videoUrl).then(function(res) {
  var responseToCache = res.clone();
  caches.open('videos').then(function(cache) {
    var request = new Request('https://example.com/video.mp4');
    cache.put(request, responseToCache).catch(function(err) {
      console.log(err); //this is where the error is thrown
    });
  });
});

不过，我可以存储多个总大小 >= 100 MB 的小文件。

我想这是 Chrome 浏览器的限制，但我在 Internet 上找不到任何参考。

有什么办法可以避免这种限制吗？

编辑：

我可以存储的最大视频大小为 64MB。如果大小超过此值，则会发生错误。

编辑 2：

该错误仅发生在 Chrome 中。 Firefox 没有这样的限制。我在 Firefox 中尝试了大小 >= 350MB 的视频，并且没问题。

Answer 1

“最大大小”不是一个设定的数字，它基于您的计算机和可用磁盘空间量，该特定数字很难计算，因此将chrome://net-internals/#httpCache 放在您的谷歌中更容易chrome地址栏，点击“缓存”，然后在statistics下找到Max size:，如果这个数字太小可以更改max size。

按照以下步骤操作：

1. 右键单击“开始”菜单或桌面上的 Google Chrome 快捷方式 并选择“属性”
2. 单击“Google Chrome”顶部的“快捷方式”选项卡 属性”窗口。
3. 单击“目标”字段，然后按“结束”键移动光标 到正文结束。
4. 按一次空格键。
5. 在字段中输入“–disk-cache-size=1073741824”（这等于1GB），修改数字 在“size=”之后，它代表你想要的空间 用于 Google Chrome 磁盘缓存（以字节为单位）。
6. 单击“确定”。关闭所有正在运行的 Google Chrome 实例，然后 重新打开浏览器以开始使用新的缓存大小。

有关该主题的任何其他问题，请参阅此页面以获得很好的答案https://superuser.com/questions/769626/why-doesnt-chrome-respect-the-diskcachesize-policy

Answer 2

您还负责定期清除缓存条目。每个 浏览器对给定的缓存存储量有硬性限制 产地可以使用。浏览器尽最大努力管理磁盘空间，但它 可能会删除源的缓存存储。浏览器会 通常删除一个来源的所有数据或不删除一个来源的所有数据 一个起源。确保按名称对缓存进行版本化并仅使用缓存 来自他们可以安全操作的脚本版本。

阅读更多here

因为这项技术的规范还没有稳定下来，所以我不建议你在你的应用程序中使用它。