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


Posted in Javascript onMay 25, 2017

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使用这种缓存技术来提高运行速度。

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

Javascript 相关文章推荐
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
vue 实现图片懒加载功能
Dec 31 Vue.js
Angularjs 实现动态添加控件功能
May 25 #Javascript
JavaScript实现自动跳转文本功能
May 25 #Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 #Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 #Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 #Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 #jQuery
基于VUE选择上传图片并页面显示(图片可删除)
May 25 #Javascript
You might like
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
python安装Scrapy图文教程
2017/08/14 Python
Python简单实现控制电脑的方法
2018/01/22 Python
对python sklearn one-hot编码详解
2018/07/10 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
简单了解Django ContentType内置组件
2019/07/23 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
全神贯注教学反思
2014/02/03 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
党员公开承诺书
2014/03/25 职场文书
党员一帮一活动总结
2014/07/08 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
停电通知范文
2015/04/16 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android