了解如何使用JavaScript中的缓存API缓存资源。CacheAPI允许服务工作者控制要缓存的资源（HTML页面、CSS、JavaScript文件、图像、JSON等）。使用CacheAPI，serviceworkers可以缓存资源以供离线使用并在以后检索它们。检测缓存支持检查缓存对象在窗口中是否可用。letisCacheSupported='caches'inwindow;caches是CacheStorage的一个实例。创建/初始化缓存我们可以使用open方法创建一个带有名称的缓存，该方法将返回一个承诺。如果缓存已经存在，则不会创建新的缓存。caches.open('cacheName').then(cache=>{});您无法访问为其他来源（域）设置的缓存。您正在创建的缓存将为您的域创建。您可以为同一域添加多个缓存，可通过caches.keys()访问。向缓存中添加项可以使用三个方法add、addAll、set来缓存资源。add()和addAll()方法自动获取资源并缓存它，而在set方法中我们将获取数据并设置缓存。addletcacheName='userSettings';leturl='/api/get/usersettings';caches.open(cacheName).then(cache=>{cache.add(url).then(()=>{console.log("Datacached")});});在上面的代码中，/api/get/usersettingsurl的内部请求已经发送到服务器，一旦接收到数据，响应将被缓存。addAlladdAll接受一个URL数组，并在缓存所有资源时返回一个Promise。leturls=['/get/userSettings?userId=1','/get/userDetails'];caches.open(cacheName).then(cache=>{cache.addAll(urls).then(()=>{console.log("Datacached")});});Cache.add/Cache.addAll不缓存Response.status值不在200范围内的响应，Cache.put允许您存储任何请求/响应对。putput将键/值对添加到当前Cache对象。简而言之，我们需要手动获取请求并设置值。注意：put()将覆盖先前存储在缓存中的与请求匹配的任何键/值对。letcacheName='userSettings';leturl='/api/get/userSettings';fetch(url).then(res=>{returncaches.open(cacheName).then(cache=>{returncache.put(url,res);})})从缓存中检索使用cache.match()获取存储在URL中的响应。constcacheName='userSettings'consturl='/api/get/userSettings'caches.open(cacheName).then(cache=>{cache.match(url).then(settings=>{console.log(settings);}});settings是一个响应对象，看起来像Response{body:(...),bodyUsed:false,headers:Headers,ok:true,status:200,statusText:"OK",type:"basic",url:"https://test.com/api/get/userSettings"}检索缓存中的所有项。缓存对象包含键方法，它将具有当前缓存对象的所有url。caches.open(cacheName).then((cache)=>{cache.keys().then((arrayOfRequest)=>{console.log(arrayOfRequest);//[请求,请求]});});arrayOfRequest是包含有关请求的所有详细信息的Request对象的数组。检索所有caches.keys().then(keys=>{//keys是一个包含键列表的数组})从缓存中删除项目您可以对缓存对象使用delete方法来删??除特定的缓存请求。letcacheName=用户设置；leturlToDelete='/api/get/userSettings';caches.open(cacheName).then(cache=>{cache.delete(urlToDelete)})完全删除缓存caches.delete(cacheName).then(()=>{console.log('缓存成功删除！');})
