189 8069 5689
JavaScript中有哪些缓存API，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联建站-专业网站定制、快速模板网站建设、高性价比白城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式白城网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖白城地区。费用合理售后完善，10多年实体公司更值得信赖。
检查 caches 对象在 window 中是否可用。
let isCacheSupported = 'caches' in window;
caches 是 CacheStorage 的一个实例。
我们可以使用 open 方法创建一个具有 name 的缓存，这将返回 promise。如果缓存已经存在，则不会创建新的缓存。
caches.open('cacheName').then( cache => { });你不能访问为其他源(域)设置的缓存。
你正在创建的缓存将为你的域创建。
你可以为同一个域添加多个缓存，可以通过 caches.keys() 访问。
可以使用三种方法 add，addAll，set 来缓存资源。add() 和 addAll() 方法自动获取资源并对其进行缓存，而在 set 方法中，我们将获取数据并设置缓存。
add
let cacheName = 'userSettings'; let url = '/api/get/usersettings'; caches.open(cacheName).then( cache => { cache.add(url).then( () => { console.log("Data cached ") }); });在上面的代码中，内部对 /api/get/usersettings url的请求已发送到服务器，一旦接收到数据，响应将被缓存。
addAll
addAll 接受URL数组，并在缓存所有资源时返回Promise。
let urls = ['/get/userSettings?userId=1', '/get/userDetails']; caches.open(cacheName).then( cache => { cache.addAll(urls).then( () => { console.log("Data cached ") }); });Cache.add/Cache.addAll 不缓存 Response.status 值不在200范围内的响应，Cache.put 可以让你存储任何请求/响应对。
put
put 为当前的 Cache 对象添加一个key/value对，在 put 中，我们需要手动获取请求并设置值。
注意：put() 将覆盖先前存储在高速缓存中与请求匹配的任何键/值对。
let cacheName = 'userSettings'; let url = '/api/get/userSettings'; fetch(url).then(res => { return caches.open(cacheName).then(cache => { return cache.put(url, res); }) })使用 cache.match() 可以得到存储到URL的 Response。
const cacheName = 'userSettings' const url = '/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" }cache 对象包含 keys 方法，这些方法将拥有当前缓存对象的所有url。
caches.open(cacheName).then( (cache) => { cache.keys().then((arrayOfRequest) => { console.log(arrayOfRequest); // [Request, Request] }); });arrayOfRequest是一个Request对象数组，其中包含有关请求的所有详细信息。
caches.keys().then(keys => { // keys是一个数组，其中包含键的列表 })可以对 cache 对象使用 delete 方法来删除特定的缓存请求。
let cacheName = userSettings; let urlToDelete = '/api/get/userSettings'; caches.open(cacheName).then(cache => { cache.delete(urlToDelete) })caches.delete(cacheName).then(() => { console.log('Cache successfully deleted!'); })关于JavaScript中有哪些缓存API问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。