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中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
layui文件上传实现代码
May 20 Javascript
简单实现js轮播图效果
Jul 14 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Python实现简单的可逆加密程序实例
2015/03/05 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
办公室主任职责范文
2013/11/08 职场文书
法学个人求职信范文
2014/01/27 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
初三学习计划书范文
2014/04/30 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书