如何批量导出浏览器CacheStorage中的网站缓存文件？

我之前碰到过几乎一模一样的情况，用Chrome DevTools的控制台写几行代码就能快速搞定批量导出，完全不需要复杂工具，步骤如下：

1. 打开目标网站并确认缓存存在
   打开Chrome访问你的网站（必须是该域名下的页面，保证能访问到对应的Service Worker缓存），按F12打开开发者工具，切换到Application标签页，在左侧菜单找到Cache Storage，展开后确认能看到你的缓存容器（比如类似my-site-cache-v2这样的名称），把这个名称记下来。

2. 在控制台执行批量下载代码
   切换到Console标签页，把下面的代码粘贴进去，记得把CACHE_NAME替换成你刚才记下的缓存容器名称：

   const CACHE_NAME = '替换成你的缓存名称';
   // 打开指定缓存
   const cache = await caches.open(CACHE_NAME);
   // 获取缓存里的所有请求条目
   const cachedRequests = await cache.keys();
   
   // 遍历每个条目并下载
   for (const request of cachedRequests) {
     const response = await cache.match(request);
     const fileBlob = await response.blob();
     // 创建临时下载链接
     const downloadUrl = URL.createObjectURL(fileBlob);
     const linkElement = document.createElement('a');
     linkElement.href = downloadUrl;
     // 从请求URL中提取文件名
     const urlPath = new URL(request.url).pathname;
     linkElement.download = urlPath.split('/').pop() || `cache-file-${Date.now()}`;
     // 触发下载
     document.body.appendChild(linkElement);
     linkElement.click();
     // 清理临时元素和链接
     document.body.removeChild(linkElement);
     URL.revokeObjectURL(downloadUrl);
   }
   

3. 确认批量下载权限
   如果缓存里有大量文件，Chrome会弹出“此网站尝试下载多个文件”的提示，直接点击“允许”即可，文件会自动批量保存到你的默认下载目录。

小提示 #

• 如果部分文件名提取异常（比如URL里没有明确文件名），可以修改代码里linkElement.download的赋值逻辑，比如手动指定前缀或者根据文件类型补充后缀。
• 确保代码在你网站的页面上下文执行，跨域页面无法访问该域名的CacheStorage。

内容的提问来源于stack exchange，提问作者lucas