如何使用 CacheStorage 导出浏览器中保存的缓存文件？

问题描述

我有一个网站，它使用 CacheStorage API 使用 Service Worker 保存各种文件。由于我无法控制的原因，许多这些文件已经从它们加载的服务器中丢失了。但是，我刚刚意识到数百个文件已在本地缓存在浏览器中，该浏览器多年来多次访问该站点（幸运的是该站点没有正确地自行清除缓存）。我可以使用 chrome 的开发工具预览文件，但是当我点击“下载”时，它会尝试从服务器（不再存在）下载副本，而不是给我本地缓存的版本。

一次性导出这些文件的最简单方法是什么（记住有几百个）？我可以完全访问运行浏览器的计算机，以及运行站点/服务工作者的域。它不需要是一个很好的解决方案，因为一旦文件恢复，我计划学习大量经验以防止将来发生类似的事情。

解决方法

CacheStorage API 可以从普通网页 JavaScript 以及 Service Worker 访问，因此如果您在访问 window.caches 的服务器上创建网页，您应该能够从缓存并做任何你想做的事。获得 cache.keys() 后，您可以遍历它并使用 match() 返回该请求的响应。然后，您可以将它们打印出来以进行复制和粘贴（可能并不理想），将每个文件 POST 到保存它们的服务器，或类似的操作。

这是我在 traintimes.org.uk 上的一些普通 JS；仅显示离线页面列表，但如果需要，它可能会获取实际的缓存条目。

<script>
// Open the page cache
caches.open("pages")
    // Fetch its keys (cached requests)
    .then(cache => cache.keys())
    // We only want the URLs of each request
    .then(reqs => reqs.map(r => r.url))
    // We want most recent one first (reverse is in-place)
    .then(urls => (urls.reverse(),urls))
    // We don't care about the domain name
    .then(urls => urls.map(u => u.replace(/^.*?uk/,'')))
    // We want them to be clickable links
    .then(urls => urls.map(u => [
        '<a href="',u,'">',u.replace(/\?cookie=[^;&]*/,''),'</a>'].join("")))
    // We want them to be visible on the page
    .then(urls =>
        document.getElementById('offline-list').innerHTML =
            '<li>' + urls.join('</li><li>') + '</li>'
    );
</script>