HTML5 中怎么使用 Cache API 遍历所有的缓存空间与文件列表-H5教程-PHP中文网

Cache API 无法自动发现所有缓存，必须事先知道缓存名才能通过 caches.open() 和 cache.keys() 读取内容；唯一可获知同源缓存名的方法是调用 caches.keys()（兼容性有限），或主动维护缓存名清单。

html5 中怎么使用 cache api 遍历所有的缓存空间与文件列表

Cache API 本身不提供直接遍历“所有缓存空间”的方法，浏览器没有全局的 cache.keys() 或类似接口；你必须**事先知道缓存名称**，才能打开对应缓存并读取其内容。

获取已知缓存名称列表

目前唯一可行的方式是：在应用中主动维护一份缓存名称清单（例如存在 IndexedDB、localStorage 或 JS 变量中），或通过 Service Worker 的生命周期逻辑推断出可能存在的缓存名（如按版本号、路由前缀等命名）。

你无法用 Cache API 主动发现未知缓存——这是浏览器有意设计的安全限制，防止站点窥探其他站点或系统缓存。

打开指定缓存并读取所有请求/响应对

一旦你知道缓存名（比如 "v1-static"），可用 caches.open() 打开它，再调用 keys() 获取所有缓存的 Request 对象：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

async function listCacheEntries(cacheName) {
  const cache = await caches.open(cacheName);
  const requests = await cache.keys(); // 返回 Request[] 数组
  const entries = [];

  for (const req of requests) {
    const res = await cache.match(req);
    entries.push({
      url: req.url,
      method: req.method,
      headers: Object.fromEntries(req.headers),
      status: res?.status,
      size: res?.headers.get('content-length') || 'unknown'
    });
  }

  return entries;
}

// 使用示例
listCacheEntries('v1-static').then(console.table);

批量检查多个缓存（需预先知道名字）

如果你维护了缓存名数组（如 ['v1-static', 'v1-api', 'fonts']），可循环处理：

async function listAllKnownCaches(cacheNames) {
  const allEntries = {};
  for (const name of cacheNames) {
    try {
      allEntries[name] = await listCacheEntries(name);
    } catch (e) {
      allEntries[name] = { error: e.message };
    }
  }
  return allEntries;
}

// 调用前确保 cacheNames 是你实际创建过的缓存名
listAllKnownCaches(['v1-static', 'v1-api']).then(console.log);

注意：不能在普通页面脚本中访问 Service Worker 创建的私有缓存

Cache API 在页面上下文和 Service Worker 上下文中都可用，但两者共享同一缓存存储。不过：

页面脚本可以调用 caches.keys() —— 它返回的是当前 origin 下所有缓存名的 Promise，这是唯一能“发现”缓存名的 API（但仅限同源且无权限限制时）；
⚠️ 重要：caches.keys() 在部分浏览器（如旧版 Safari）中可能不可用或返回空数组，且它只列出当前 origin 显式创建的缓存，不包括浏览器自动管理的 HTTP 缓存、预加载缓存等；
Service Worker 中创建的缓存，页面脚本默认可读（只要同源），无需额外授权。

不复杂但容易忽略：真正可控的缓存管理依赖于你对缓存名的约定与记录，而非自动发现。