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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
JS的反射问题
Apr 07 Javascript
来自qq的javascript面试题
Jul 24 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 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使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
python实现simhash算法实例
2014/04/25 Python
python采集百度百科的方法
2015/06/05 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
Python for i in range ()用法详解
2020/09/18 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
python实现udp传输图片功能
2020/03/20 Python
python numpy库np.percentile用法说明
2020/06/08 Python
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
厂长岗位职责
2014/02/19 职场文书
学期评语大全
2014/04/30 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
中秋晚会致辞
2015/07/31 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书