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 相关文章推荐
javascript new一个对象的实质
Jan 07 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
JavaScript Date对象详解
Mar 01 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP脚本中include文件出错解决方法
2008/11/20 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
怎么使用pipenv管理你的python项目
2018/03/12 Python
python实现人民币大写转换
2018/06/20 Python
普通大学毕业生自荐信
2013/11/04 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
服务质量承诺书
2014/03/27 职场文书
报告会主持词
2014/04/02 职场文书
工作会议方案
2014/05/21 职场文书
爱心募捐感谢信
2015/01/22 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书