欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解Javascript获取缓存和清除缓存API

程序员文章站 2023-11-18 15:07:58
javascript serviceworker api的好处就是让web开发人员轻松的控制缓存。虽然使用etags等技术也是一种控制缓存的技术,按使用javascript...

javascript serviceworker api的好处就是让web开发人员轻松的控制缓存。虽然使用etags等技术也是一种控制缓存的技术,按使用javascript让程序来控制缓存功能更强大,更*。当然,强大有强大的好处,也有弊处——你需要做善后处理,所谓的善后处理,就是要清理缓存。

下面我们来看看如何创建缓存对象、在缓存里添加请求缓存数据,从缓存里删除请求缓存的数据,最后是如何完全的删除缓存。

判断浏览器对缓存对象cache api的支持

检查浏览器是否支持cache api…

if('caches' in window) {
 // has support!
}

…检查window里是否存在caches对象。

创建一个缓存对象

创建一个缓存对象的方法是使用caches.open(),并传入缓存的名称:

caches.open('test-cache').then(function(cache) {
 // 缓存创建完成,现在就可以访问了
});

这个caches.open方法返回一个promise,其中的cache对象新创建出来,如果是以前创建过,就不重新创建。

添加缓存数据

对于这类的缓存,你可以把它想象成一个request对象数组,request请求获取的响应数据将会按键值存储在缓存对象里。有两个方法可以往缓存里添加数据:add 和 addall。用这两个方法将要缓存的请求的地址添加进去。关于request对象的介绍你可以参考fetch api这篇文章。

使用addall方法可以批量添加缓存请求:

caches.open('test-cache').then(function(cache) { 
 cache.addall(['/', '/images/logo.png'])
  .then(function() { 
   // cached!
  });
});

这个addall方法可以接受一个地址数组作为参数,这些请求地址的响应数据将会被缓存在cache对象里。addall返回的是一个promise。添加单个地址使用add方法:

caches.open('test-cache').then(function(cache) {
 cache.add('/page/1'); // "/page/1" 地址将会被请求,响应数据会缓存起来。
});
add()方法还可以接受一个自定义的request:

caches.open('test-cache').then(function(cache) {
 cache.add(new request('/page/1', { /* 请求参数 */ }));
});
//跟add()方法很相似,put()方法也可以添加请求地址,同时添加它的响应数据:

fetch('/page/1').then(function(response) {
 return caches.open('test-cache').then(function(cache) {
  return cache.put('/page/1', response);
 });
});

访问缓存数据

要查看已经换的请求数据,我们可以使用缓存对象里的keys()方法来获取所有缓存request对象,以数组形式:

caches.open('test-cache').then(function(cache) { 
 cache.keys().then(function(cachedrequests) { 
  console.log(cachedrequests); // [request, request]
 });
});

/*
request {
 bodyused: false
 credentials: "omit"
 headers: headers
 integrity: ""
 method: "get"
 mode: "no-cors"
 redirect: "follow"
 referrer: ""
 url: "http://www.webhek.com/images/logo.png"
}
*/

如果你想查看缓存的request请求的响应内容,可以使用cache.match()或cache.matchall()方法:

caches.open('test-cache').then(function(cache) {
 cache.match('/page/1').then(function(matchedresponse) {
  console.log(matchedresponse);
 });
});

/*
response {
 body: (...),
 bodyused: false,
 headers: headers,
 ok: true,
 status: 200,
 statustext: "ok",
 type: "basic",
 url: "https://www.webhek.com/page/1"
}
*/

关于response对象的用法和详细信息,你可以参考fetch api这篇文章。

删除缓存里的数据

从缓存里删除数据,我们可以使用cache对象里的delete()方法:

caches.open('test-cache').then(function(cache) {
 cache.delete('/page/1');
});

这样,缓存里将不再有/page/1请求数据。

获取现有的缓存里的缓存名称

想要获取缓存里已经存在的缓存数据的名称,我们需要使用caches.keys()方法:

caches.keys().then(function(cachekeys) { 
 console.log(cachekeys); // ex: ["test-cache"]
});

window.caches.keys()返回的也是一个promise。

删除一个缓存对象

想要删除一个缓存对象,你只需要缓存的键名即可:

caches.delete('test-cache').then(function() { 
 console.log('cache successfully deleted!'); 
});

大量删除旧缓存数据的方法:

// 假设`cache_name`是新的缓存的名称
// 现在清除旧的缓存
var cache_name = 'version-8';

// ...

caches.keys().then(function(cachenames) {
 return promise.all(
  cachenames.map(function(cachename) {
   if(cachename != cache_name) {
    return caches.delete(cachename);
   }
  })
 );
});

想成为一个service worker专家?上面的这些代码值得放到你的储备库里。火狐浏览器和谷歌浏览器都支持service worker,相信很快就会有更多的网站、app使用这种缓存技术来提高运行速度。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。