详解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 相关文章推荐
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 Javascript
React Fragment介绍与使用详解
Nov 11 Javascript
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/05/09 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
php中opendir函数用法实例
2014/11/15 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
php经典趣味算法实例代码
2020/01/21 PHP
javascript radio 联动效果
2009/03/04 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
JS功能代码集锦
2016/05/04 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
vue系列之动态路由详解【原创】
2017/09/10 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
js实现一个简易计算器
2020/03/30 Javascript
js实现简单的倒计时
2021/01/28 Javascript
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
pymongo中group by的操作方法教程
2019/03/22 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
后勤工作职责
2013/12/22 职场文书
关于逃课的检讨书
2014/01/23 职场文书
学生安全责任书
2014/04/15 职场文书
大学生应聘求职信
2014/05/26 职场文书
解除同居协议书
2015/01/29 职场文书
红色经典观后感
2015/06/18 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android