浅谈JavaScript的Polymer框架中的behaviors对象


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 相关文章推荐
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
js验证上传图片的方法
May 12 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
Promise静态四兄弟实现示例详解
Jul 07 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 #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
You might like
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
python调用java的Webservice示例
2014/03/10 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
python实现邮件自动发送
2019/08/10 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
Python可以用来做什么
2020/11/23 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
简历中个人求职的自我评价模板
2013/11/29 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
团委竞选演讲稿
2014/04/24 职场文书
表扬稿格式范文
2015/01/16 职场文书
捐资助学感谢信
2015/01/21 职场文书
优秀团员自我评价
2015/03/10 职场文书
社区活动总结范文
2015/05/07 职场文书
体育教师研修感悟
2015/11/18 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
详解SQL报错盲注
2022/07/23 SQL Server