CacheStorage 浏览器缓存

特点：.Cache Stroage只能缓存静态资源，所以它只能缓存用户的 GET 请求.Cache Stroage中的缓存不会过期，但是浏览器对它的大小是有限制的，所以需要我们定期进行清理.CacheStorage 总是对不受信任的源（即那些不使用HTTPS)使用 SecurityError reject. .在Firefox Devtools选项/齿轮菜单中通过选中"通过HTTP启用 Service Workers (当工具箱打开时)" 选项来绕开这个限制。基本使用1、CacheStorage.提供了一个 ServiceWorker 、其它类型worker或者 window 范围内可以访问到的所有命名cache的主目录  .CacheStorage通过全局变量caches来表示(1)打开对应的CacheStoragecaches.open(cacheName).接口 open() 方法返回一个resolve为匹配 cacheName 的 Cache 对象的 Promise.如果没有则会以cacheName创建一个.返回一个Pomise,传递一个对应的cache对象来操作对应的CatchStoragevar cachedResponse = caches.match(event.request,options).catch(function() {return fetch(event.request);}).then(function(response) {caches.open('v1').then(function(cache) {cache.put(event.request, response);});return response.clone();}).catch(function() {return caches.match('/sw-test/gallery/myLittleVader.jpg');});可选options:ignoreSearch: Boolean (en-US)值， 指定匹配过程是否应该忽略url中查询参数。举个例子，如果该参数设置为true, 那么 ?value=bar 作为 http://foo.com/?value=bar 中的查询参数将会在匹配过程中被忽略。该参数默认 false。ignoreMethod:  Boolean (en-US) 值，当被设置为 true 时，将会阻止在匹配操作中对 Request请求的 http 方式的验证 (通常只允许 GET 和 HEAD 两种请求方式)。该参数默认为 false.ignoreVary:  Boolean (en-US) 值，当该字段被设置为 true, 告知在匹配操作中忽略对VARY头信息的匹配。换句话说，当请求 URL 匹配上，你将获取匹配的 Response 对象，无论请求的 VARY  头存在或者没有。该参数默认为 false.cacheName:  DOMString 值， 表示所要搜索的缓存名称(2)匹配对应的CacheStoragecaches.match(Request对象或url字符串).then(存储内容=>{...})caches.match(event.request).then(function(response) {return response || fetch(event.request).then(function(r) {caches.open('v1').then(function(cache) {cache.put(event.request, r);});return r.clone();});}).catch(function() {return caches.match('/sw-test/gallery/myLittleVader.jpg');});(3)返回CacheStorage存储的所有key这里是service worker中的监听函数this.addEventListener('activate', function(event) {var cacheWhitelist = ['v2'];event.waitUntil(caches.keys().then(function(keyList) {return Promise.all(keyList.map(function(key) {if (cacheWhitelist.indexOf(key) === -1) {return caches.delete(key);}});}));});(4)判断key是否存在caches.has(cacheName).then(function(boolean) {true: 缓存存在});(5)删除缓存caches.delete(cacheName).then(function(boolean) {...});2、cache对象(1)添加任意缓存cache.put(request或url,response).允许存储任何请求/响应对.将覆盖先前存储在匹配请求的cache中的任何键/值对request,response可通过service worker的fetch监听函数event.request、或fetch中的Requset、Response对象获取request可以是Request对象，也可以是一个url(2)添加缓存cahce.add(Request对象或url).不会缓存 Response.status 值不在200范围内的响应cache.add(request).then(function() {request has been added to the cache});等价于：fetch(url).then(function (response) {if (!response.ok) {throw new TypeError('bad response status');}return cache.put(url, response);})(4)批量添加缓存cache.addAll(requests[]或url[]).then(function() {requests have been added to the cache});.不会缓存 Response.status 值不在200范围内的响应(5)删除缓存cache.delete(request或url,{options}).then(function(boolean) {...});可选options:ignoreSearch: Boolean (en-US)值， 指定匹配过程是否应该忽略url中查询参数。举个例子，如果该参数设置为true, 那么 ?value=bar 作为 http://foo.com/?value=bar 中的查询参数将会在匹配过程中被忽略。该参数默认 false。ignoreMethod:  Boolean (en-US) 值，当被设置为 true 时，将会阻止在匹配操作中对 Request请求的 http 方式的验证 (通常只允许 GET 和 HEAD 两种请求方式)。该参数默认为 false.ignoreVary:  Boolean (en-US) 值，当该字段被设置为 true, 告知在匹配操作中忽略对VARY头信息的匹配。换句话说，当请求 URL 匹配上，你将获取匹配的 Response 对象，无论请求的 VARY  头存在或者没有。该参数默认为 false.cacheName:  DOMString 值， 表示所要搜索的缓存名称(6)返回所有的key.具有相同URL但不同请求头的请求，如果它们的响应头中有 VARY 头部，则他们可以被返回。cache.keys(request或url,options).then(function(keys) {do something with your array of requests});(7)匹配对应的缓存.只解析为 response[0] （第一个匹配的响应(response)对象）cache.match(request或url,options).then(function(response) {操作response});(8)匹配对应的缓存数组cache.matchAll(request或url,options).then(function(response) {do something with the response array});

CacheStorage 浏览器缓存相关推荐

离线缓存占内存吗_彻底弄懂浏览器缓存策略
浏览器缓存策略对于前端开发同学来说不陌生,大家都有一定的了解,但如果没有系统的归纳总结,可能三言两语很难说明白,甚至说错,尤其在面试过程中感触颇深,很多候选人对这类基础知识竟然都是一知半解,说出几个概 ...
详解浏览器缓存前端开发必会
详解浏览器缓存缓存可以说是性能优化中简单高效的一种优化方式了.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷. 对于一个数据请求来 ...
清除浏览器缓存的所有方法
1.清除浏览器缓存 1.Disable cache 打开开发者工具(F12),选择 Network--Disable cache 即可.需要清除某网站缓存时 F12 打开开发者工具就会自动清除这个网站 ...
浏览器缓存网站静态文件
当用户第一次访问你的网站时,让用户的浏览器缓存网站的静态文件,如图片\CSS\JS等,然后接访问接下来的页面就会直接调用浏览器的缓存而不是重新从服务器下载,这样既节省带宽和流量又加快了用户打开网页的速 ...
同源策略禁止读取位于_用浏览器缓存绕过同源策略（SOP）限制
本文分享的Writeup是作者在做Keybase.io的漏洞众测中发现的SOP(同源策略)绕过漏洞,由于Keybase.io在用的多个API端点都启用了CORS(跨域资源共享)机制,这种缓解同源策略的 ...
浏览器缓存导致FLASH资源更新问题的解决方案
在网上搜浏览器缓存问题时,遇上了很多问题.一是不知道应该用何种关键字搜索,二是一搜出来,就全是讲的是如何禁用浏览器缓存的方案. 作为大型点的FLASH WEBGAME来说,不缓存显然是不行的.总体上来 ...
浏览器缓存和webpack缓存配置
网络请求会耗费大量时间和请求,如果可以重用为改变的网络资源,对于用户来说可以更快更流畅的查看网页,对于服务器来说减少了很多负荷,所以浏览器缓存是前端优化的重要内容.本文介绍了浏览器缓存的机制和缓存在w ...
禁止Chrome浏览器缓存
为什么80%的码农都做不了架构师?>>> 禁止Chrome浏览器缓存 HTML: <META HTTP-EQUIV="pragma" CONTENT= ...
apache下用expires_module让浏览器缓存静态文件
apache下用expires_module让浏览器缓存静态文件 apache配置静态缓存的原因: 第一点, 减轻服务器的压力. 第二点, 省去浏览器经常要去服务端下载CSS. ...

CacheStorage 浏览器缓存

CacheStorage 浏览器缓存相关推荐

最新文章

热门文章