美高梅开户-美高梅官方网站开户

您的位置:美高梅开户 > 美高梅官方网站开户 > 详解Javascript获取缓存和扫除缓存API

详解Javascript获取缓存和扫除缓存API

发布时间:2019-08-12 12:24编辑:美高梅官方网站开户浏览(158)

    caches.delete('test-cache').then(function() { 
     console.log('Cache successfully deleted!'); 
    });
    

    删除一个缓存对象

    想成为一个service worker专家?上面的这些代码值得放到你的储备库里。火狐浏览器和谷歌浏览器都支持service worker,相信很快就会有更多的网站、app使用这种缓存技术来提高运行速度。

    caches.open('test-cache').then(function(cache) {
     cache.add('/page/1'); // "/page/1" 地址将会被请求,响应数据会缓存起来。
    });
    

    创建一个缓存对象

    您可能感兴趣的文章:

    • 禁止js文件缓存的代码
    • 高性能WEB开发 JS、CSS的合并、压缩、缓存管理
    • JSP页面缓存cache技术--浏览器缓存介绍及实现方法
    • 防止文件缓存的js代码
    • ie下jquery.getJSON的缓存问题的处理方法
    • Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
    • JS localStorage实现本地缓存的方法
    • JS清除IE浏览器缓存的方法
    • js、css、img等浏览器缓存问题的2种解决方案
    • 让html页面不缓存js的实现方法

    大量删除旧缓存数据的方法:

    判断浏览器对缓存对象cache API的支持

    这个caches.open方法返回一个Promise,其中的cache对象新创建出来,如果是以前创建过,就不重新创建。

    这个caches.open方法返回一个Promise,其中的cache对象新创建出来,如果是以前创建过,就不重新创建。

    如果你想查看缓存的Request请求的响应内容,可以使用cache.match()或cache.matchAll()方法:

    if('caches' in window) {
     // Has support!
    }
    
    caches.open('test-cache').then(function(cache) { 
     cache.addAll(['/', '/images/logo.png'])
      .then(function() { 
       // Cached!
      });
    });
    

    对于这类的缓存,你可以把它想象成一个Request对象数组,Request请求获取的响应数据将会按键值存储在缓存对象里。有两个方法可以往缓存里添加数据:add 和 addAll。用这两个方法将要缓存的请求的地址添加进去。关于Request对象的介绍你可以参考fetch API这篇文章。

    创建一个缓存对象的方法是使用caches.open(),并传入缓存的名称:

    检查浏览器是否支持Cache API…

    caches.keys().then(function(cacheKeys) { 
     console.log(cacheKeys); // ex: ["test-cache"]
    });
    

    关于Response对象的用法和详细信息,你可以参考fetch API这篇文章。

    caches.open('test-cache').then(function(cache) {
     cache.delete('/page/1');
    });
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    判断浏览器对缓存对象cache API的支持

    caches.open('test-cache').then(function(cache) { 
     cache.keys().then(function(cachedRequests) { 
     console.log(cachedRequests); // [Request, Request]
     });
    });
    
    /*
    Request {
     bodyUsed: false
     credentials: "omit"
     headers: Headers
     integrity: ""
     method: "GET"
     mode: "no-cors"
     redirect: "follow"
     referrer: ""
     url: "http://www.webhek.com/images/logo.png"
    }
    */
    

    删除一个缓存对象

    下面我们来看看如何创建缓存对象、在缓存里添加请求缓存数据,从缓存里删除请求缓存的数据,最后是如何完全的删除缓存。

    想要获取缓存里已经存在的缓存数据的名称,我们需要使用caches.keys()方法:

    JavaScript ServiceWorker API的好处就是让WEB开发人员轻松的控制缓存。虽然使用ETags等技术也是一种控制缓存的技术,按使用JavaScript让程序来控制缓存功能更强大,更自由。当然,强大有强大的好处,也有弊处——你需要做善后处理,所谓的善后处理,就是要清理缓存。

    删除缓存里的数据

    获取现有的缓存里的缓存名称

    caches.open('test-cache').then(function(cache) {
     cache.add('/page/1'); // "/page/1" 地址将会被请求,响应数据会缓存起来。
    });
    add()方法还可以接受一个自定义的Request:
    
    caches.open('test-cache').then(function(cache) {
     cache.add(new Request('/page/1', { /* 请求参数 */ }));
    });
    //跟add()方法很相似,put()方法也可以添加请求地址,同时添加它的响应数据:
    
    fetch('/page/1').then(function(response) {
     return caches.open('test-cache').then(function(cache) {
      return cache.put('/page/1', response);
     });
    });
    

    想成为一个service worker专家?上面的这些代码值得放到你的储备库里。火狐浏览器和谷歌浏览器都支持service worker,相信很快就会有更多的网站、app使用这种缓存技术来提高运行速度。

    想要删除一个缓存对象,你只需要缓存的键名即可:

    创建一个缓存对象的方法是使用caches.open(),并传入缓存的名称:

    访问缓存数据

    想要删除一个缓存对象,你只需要缓存的键名即可:

    获取现有的缓存里的缓存名称

    添加缓存数据

    // 假设`CACHE_NAME`是新的缓存的名称
    // 现在清除旧的缓存
    var CACHE_NAME = 'version-8';
    
    // ...
    
    caches.keys().then(function(cacheNames) {
     return Promise.all(
      cacheNames.map(function(cacheName) {
       if(cacheName != CACHE_NAME) {
        return caches.delete(cacheName);
       }
      })
     );
    });
    

    这样,缓存里将不再有/page/1请求数据。

    JavaScript ServiceWorker API的好处就是让web开发人员轻松的控制缓存。虽然使用ETags等技术也是一种控制缓存的技术,按使用JavaScript让程序来控制缓存功能更强大,更自由。当然,强大有强大的好处,也有弊处——你需要做善后处理,所谓的善后处理,就是要清理缓存。

    如果你想查看缓存的Request请求的响应内容,可以使用cache.match()或cache.matchAll()方法:

    …检查window里是否存在caches对象。

    caches.open('test-cache').then(function(cache) {
     cache.match('/page/1').then(function(matchedResponse) {
     console.log(matchedResponse);
     });
    });
    
    /*
    Response {
     body: (...),
     bodyUsed: false,
     headers: Headers,
     ok: true,
     status: 200,
     statusText: "OK",
     type: "basic",
     url: "https://www.webhek.com/page/1"
    }
    */
    

    本文由美高梅开户发布于美高梅官方网站开户,转载请注明出处:详解Javascript获取缓存和扫除缓存API

    关键词: 美高梅开户