Cache Storage 是浏览器提供的一种 Web API，用于在客户端缓存中存储和管理资源。它是一种键值对存储系统，用于将请求的响应、文件、数据等保存在浏览器的缓存中，以便在后续的请求中可以直接从缓存中获取，提供更快的访问速度和离线使用能力。 ——chatgpt
CacheStorage 接口表示 Cache 对象的存储。它提供了一个 ServiceWorker 、其他类型 worker 或者 window 范围内可以访问到的所有命名 cache 的主目录（它并不是一定要和 service workers 一起使用，即使它是在 service workers 规范中定义的），并维护一份字符串名称到相应 Cache 对象的映射。
你可以通过 caches 属性访问 CacheStorage .
关于API
缓存（Cache）对象提供了一些用于管理缓存存储的方法。下面是一些常见的缓存方法：
cache.match(request, options)该方法用于检索与给定请求（Request）匹配的响应（Response）。它接受两个参数，第一个参数是请求对象，第二个参数是一个可选的配置对象。cache.matchAll(request, options)该方法用于检索与给定请求（Request）匹配的所有响应（Response）的数组。它也接受一个请求对象和一个可选的配置对象作为参数。cache.add(request)该方法将指定的请求（Request）添加到缓存中，如果缓存中已存在该请求，则不执行任何操作。它接受一个请求对象作为参数。cache.addAll(requests)该方法将一个请求（Request）数组添加到缓存中。它接受一个请求数组作为参数，并将每个请求添加到缓存中。cache.put(request, response)该方法将指定的请求（Request）和相应（Response）对添加或更新到缓存中。它接受一个请求对象和一个响应对象作为参数。cache.delete(request, options)该方法从缓存中删除与指定请求（Request）匹配的缓存条目。它接受一个请求对象和一个可选的配置对象作为参数。cache.keys()该方法返回一个包含缓存中所有请求对象的数组。
关于
response的使用，提供了三种读取文件的方法分别是response.text()、response.blob()或response.arrayBuffer()
比如说想在cache storage中存储一个文件, 你可以这样做：
if ('caches' in window) {
// 首先打开缓存存储
caches.open('my-cache').then((cache) => {
// 存储一个请求的响应结果
let url = '/api/data';
fetch(url).then((response) => {
cache.put(url, response);
});
});
}
其他几个api大概用法如下:
//这里只列举了查找和删除
//存储数据到缓存
let url = '/api/data';
caches.open('my-cache').then((cache) => {
cache.match(url).then((response) => {
if (response) {
// 在缓存中找到了匹配的响应
console.log('Matched response:', response);
} else {
// 在缓存中未找到匹配的响应
console.log('No matching response found.');
}
});
});
//从缓存中删除数据：
caches.open('my-cache').then((cache) => {
cache.delete('/api/data').then((deleted) => {
if (deleted) {
// 数据删除成功
} else {
// 数据删除失败或不存在
}
});
});
