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学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
angular共享依赖的解决方案分享
Oct 15 Javascript
JavaScript 异步时序问题
Nov 20 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 应用程序安全防范技术研究
2009/09/25 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
毕业求职自荐信格式是什么
2013/11/19 职场文书
经典演讲稿范文
2013/12/30 职场文书
高二美术教学反思
2014/01/14 职场文书
入股协议书范本
2014/04/14 职场文书
大二学生自我检讨书
2014/10/23 职场文书
委托培训协议书
2014/11/17 职场文书
《法国号》教学反思
2016/02/22 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
详解JS数组方法
2021/11/20 Javascript