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 相关文章推荐
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
基于D3.js实现时钟效果
Jul 17 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
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
地摊中国 - 珍藏老照片
2020/08/18 杂记
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
js同时按下两个方向键
2007/12/01 Javascript
取选中的radio的值
2010/01/11 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
深入理解js promise chain
2016/05/05 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
element-ui多文件上传的实现示例
2019/04/10 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
2019/12/22 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
代码分析Python地图坐标转换
2018/02/08 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
Unix控制后台进程都有哪些进程
2016/09/22 面试题
老师自我鉴定范文
2013/12/25 职场文书
房产代理公证处委托书
2014/04/04 职场文书
供货协议书
2014/04/22 职场文书
感恩教育月活动总结
2014/07/07 职场文书
医院领导班子整改方案
2014/10/01 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python
java代码实现空间切割
2022/01/18 Java/Android