Javascript缓存API


Posted in Javascript onJune 14, 2016

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 相关文章推荐
浅析javascript闭包 实例分析
Dec 25 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
Jquery 效果使用详解
Nov 23 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
JS修改地址栏参数实例代码
Jun 14 #Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 #Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 #Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 #Javascript
浅析JS获取url中的参数实例代码
Jun 14 #Javascript
Javascript基础_标记文字的实现方法
Jun 14 #Javascript
深入浅析JavaScript的API设计原则
Jun 14 #Javascript
You might like
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
Python语法分析之字符串格式化
2019/06/13 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
保洁主管岗位职责
2013/11/20 职场文书
学期评语大全
2014/04/30 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
工作证明英文模板
2014/10/21 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
vue动态绑定style样式
2022/04/20 Vue.js