浅谈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 相关文章推荐
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 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
PHP往XML中添加节点的方法
2015/03/12 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
php获取远程文件大小
2015/10/20 PHP
xtree.js 代码
2007/03/13 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
玩转方法:call和apply
2014/05/08 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
window.onload使用指南
2015/09/13 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[19:15]DK战队纪录片
2014/09/02 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
Django 限制访问频率的思路详解
2019/12/24 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
2013年军训通讯稿
2014/02/05 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers