详解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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 Javascript
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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
jquery json 实例代码
2010/12/02 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python实现partial改变方法默认参数
2014/08/18 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
python获取交互式ssh shell的方法
2019/02/14 Python
学习Django知识点分享
2019/09/11 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
python Xpath语法的使用
2020/11/26 Python
中医药大学毕业生自荐信
2013/11/08 职场文书
服装电子商务创业计划书
2014/01/30 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
先进集体申报材料
2014/12/25 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
高中政治教师教学反思
2016/02/23 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
5个实用的JavaScript新特性
2022/06/16 Javascript