将大量响应放入缓存存储时,"DOMException:未找到条目"

Question

我在缓存存储中存储视频时遇到问题.如果视频尺寸较小,它可以正常工作,但如果它的大小约为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的视频和OK.

Answer 1

您还负责定期清除缓存条目。每个浏览器对给定源可以使用的缓存存储量都有硬性限制。浏览器会尽力管理磁盘空间，但可能会删除源的缓存存储。浏览器通常会删除某个源的所有数据，或者不删除某个源的任何数据。确保按名称对缓存进行版本控制，并仅使用可以安全操作的脚本版本中的缓存。

在这里阅读更多内容

由于该技术的规格尚未稳定，因此我不建议您在应用程序中使用它。