JavaScript中的cacheStorage使用详解

 更新时间:2015年07月29日 11:03:40   投稿:goldensun   我要评论

这篇文章主要介绍了JavaScript中的cacheStorage使用详解,是JavaScript入门学习中的基础知识,需要的朋友可以参考下

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 mapreduce工作原理简析

    JavaScript mapreduce工作原理简析

    MapReduce是一个编程模型,用于作业调度,也是一个处理和生成超大数据集的算法模型的相关实现,本文将详细介绍JavaScript mapreduce工作原理,需要的朋友可以参考下
    2012-11-11
  • DOM 事件流详解

    DOM 事件流详解

    这篇文章主要详细介绍了DOM中的事件流,包括冒泡型事件、事件监听、标准DOM事件监听这三个方面,十分详细,推荐给大家。
    2015-01-01
  • Javascript学习笔记之 函数篇(二) : this 的工作机制

    Javascript学习笔记之 函数篇(二) : this 的工作机制

    与其他编程语言相比,Javascript 对 this 的使用是一套完全不同的机制。this 在五种情况下的值是各有不同的。
    2014-06-06
  • javascript编码的几个方法详细介绍

    javascript编码的几个方法详细介绍

    escape定义和用法escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。语法 escape(string)参数描述string必需。要被转义或编码的字符串。返回值已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列,需要了解的朋友可以参考下
    2013-01-01
  • js文件缓存之版本管理详解

    js文件缓存之版本管理详解

    以前也做过不少项目,但从来就没有把关注的目光投向过js文件缓存。最近终于在毫无意识的情况下跳进了这个大坑
    2013-07-07
  • 日历查询的算法 如何计算某一天是星期几

    日历查询的算法 如何计算某一天是星期几

    历史上的某一天是星期几?未来的某一天是星期几?关于这个问题,有很多计算公式,其中最著名的是蔡勒(Zeller)公式
    2012-12-12
  • JavaScript substr() 字符串截取函数使用详解

    JavaScript substr() 字符串截取函数使用详解

    substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符,文中配有大量实例代码
    2013-04-04
  • JavaScript Math.floor方法(对数值向下取整)

    JavaScript Math.floor方法(对数值向下取整)

    这篇文章主要介绍了Math.floor 方法用于对数值向下取整,即得到小于或等于该数值的最大整数,需要的朋友可以参考下
    2015-01-01
  • 深入理解JavaScript中的对象复制(Object Clone)

    深入理解JavaScript中的对象复制(Object Clone)

    下面小编就为大家带来一篇深入理解JavaScript中的对象复制(Object Clone)。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • ajax与jsonp的区别及用法

    ajax与jsonp的区别及用法

    在本篇文章里我们给大家分享了ajax与jsonp的区别的相关知识点内容,有需要的朋友们可以学习下。
    2018-10-10

最新评论