详解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.tmpl 动态ajax扩展
Nov 10 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
vue双向绑定简要分析
Mar 23 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
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中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
php开发文档 会员收费1期
2012/08/14 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
PHP echo()函数讲解
2019/02/15 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
大学生自我鉴定
2013/12/08 职场文书
大学军训感言300字
2014/03/09 职场文书
导游个人求职信范文
2014/03/23 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
企业承诺书格式范文
2015/04/28 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python