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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
Python实现CET查分的方法
2015/03/10 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python3简单实现串口通信的方法
2019/06/12 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
会议邀请函范文
2014/01/09 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
大学生就业自荐书
2014/06/16 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
人与自然的观后感
2015/06/18 职场文书
爱国电影观后感
2015/06/19 职场文书
导游词之河北邯郸
2019/09/12 职场文书
python基础之文件操作
2021/10/24 Python