JavaScript中的cacheStorage使用详解


Posted in Javascript onJuly 29, 2015

localStorage 应是家喻户晓的?但本地存储这个家族可远不止它。以前扯过 sessionStorage,现在还有个神奇的 CacheStorage。它用来存储 Response 对象的。也就是说用来对 HTTP ,响应做缓存的。虽然 localStorage 也能做,但是它可能更专业。

CacheStorage 在浏览器上的引用名叫 caches 而不是驼峰写法的 cacheStorage,它定义在 ServiceWorker 的规范中。CacheStorage 是多个 Cache 的集合,而每个 Cache 可以存储多个 Response 对象。

废话不能说再多,下面是 demo

<script>
caches.delete('c1');
caches.delete('c2');
Promise.all([
 caches.open('c1').then(function(cache) {
  return cache.put('/hehe', new Response('aaa', { status: 200 }));
 }),
 caches.open('c2').then(function(cache) {
  return cache.put('/hehe', new Response('bbb', { status: 200 }));
 })
]).then(function() {
 return caches.match('/hehe');
}).then(function(response) {
 return response.text();
}).then(function(body) {
 console.log(body);
});
</script>

首先,在 caches 上调用 open 方法就可以异步地得到一个 Cache 对象的引用。在这个对象上我们可以把 Response 对象 put 进去(参数是一个 URL 和一个 Response 对象)、用 match 方法取出(传入一个 URL 取出对应的 Response 对象)。

match 方法不仅可以在 Cache 上调用 CacheStorage 上也有 match 方法,比如上面例子就打开了两个 Cache,都写入一个叫 /hehe 的 URL。在写入操作完成之后,到外部的 CacheStorage 上调用 match 方法来匹配 /hehe,结果是随机的(没找到这个规则在哪里定义的)。

虽然上面的例子中只对 Cache 对象 put 了一个数据,而 Cache 对象本身可以存放更多的 URL/Response 对。并且提供了 delete(用户删除)、keys(用于遍历)等方法。但是 Cache 并不像 localStorage 一样有 clear 方法,如果非要清空一个 Cache,可以直接在 CacheStorage 上把整个 Cache 给 delete 掉再重新 open。

这套 API 和 ServiceWorker 一家的,它通常被用于 ServiceWorker 中,整个设计风格也和 ServiceWorker 一样都基于 Promise。

Javascript 相关文章推荐
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
Move.js入门
Feb 08 Javascript
Express框架之connect-flash详解
May 31 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
JavaScript中数组继承的简单示例
Jul 29 #Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 #Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 #Javascript
浅谈Javascript数组的使用
Jul 29 #Javascript
举例讲解Node.js中的Writable对象
Jul 29 #Javascript
浅谈Javascript数组索引
Jul 29 #Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 #Javascript
You might like
谈谈关于php的优点与缺点
2013/04/11 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
javascript 模拟点击广告
2010/01/02 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
JavaScript实用技巧(一)
2010/08/16 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
工程开工庆典邀请函
2014/02/01 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
2014年国培研修感言
2014/03/09 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
三八妇女节寄语
2015/02/27 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
公司捐书倡议书
2015/04/27 职场文书
Python中的 Set 与 dict
2022/03/13 Python
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers