Javascript如何取得快取和清除快取API的範例程式碼分享

本篇文章主要介紹了詳解Javascript取得快取和清除快取API，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

JavaScript ServiceWorker API的好處就是讓web開發人員輕鬆的控制快取。雖然使用ETags等技術也是控制快取的技術，按下使用JavaScript讓程式來控制快取功能更強大，更自由。當然，強大有強大的好處，也有弊處──你需要做善後處理，所謂的善後處理，就是要清理快取。

下面我們來看看如何建立快取物件、在快取裡新增請求快取資料，從快取裡刪除請求快取的數據，最後是如何完全的刪除快取。

判斷瀏覽器對快取物件cache API的支援

檢查瀏覽器是否支援Cache API…

if('caches' in window) {
 // Has support!
}

…檢查window裡是否存在caches物件。

建立一個快取物件

建立一個快取物件的方法是使用caches.open()，並傳入快取的名稱：

caches.open('test-cache').then(function(cache) {
 // 缓存创建完成，现在就可以访问了
});

這個caches.open方法回傳一個Promise，其中的cache物件是新創建出來，如果是以前創建過，就不重新創建。

新增快取資料

對於這類的緩存，你可以把它想像成一個Request物件陣列，Request請求取得的回應數據將會按鍵值儲存在快取物件裡。有兩個方法可以往快取裡新增資料：add 和 addAll。用這兩個方法將要快取的請求的位址加入。關於Request物件的介紹你可以參考fetch API這篇文章。

使用addAll方法可以批次新增快取請求：

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

這個addAll方法可以接受一個位址陣列作為參數，這些請求位址的回應資料將會被快取在cache物件裡。 addAll回傳的是一個Promise。新增單一位址使用add方法：

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);
 });
});

存取快取資料

要查看已經換的請求數據，我們可以使用快取物件裡的keys()方法來取得所有快取Request對象，以數組形式：

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"
}
*/

如果你想查看快取的Request請求的回應內容，可以使用cache.match()或cache.matchAll()方法：

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"
}
*/

關於Response物件的用法和詳細信息，你可以參考fetch API這篇文章。

刪除快取裡的資料

從快取刪除數據，我們可以使用cache物件裡的delete()方法：

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

這樣，快取裡將不再有/page/1請求資料。

取得現有的快取裡的快取名稱

想要取得快取裡已經存在的快取資料的名稱，我們需要使用caches.keys()方法：

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

window.caches.keys()回傳的也是一個Promise。

刪除一個快取對象

想要刪除一個快取對象，你只需要快取的鍵名：

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

大量刪除舊快取資料的方法：

// 假设`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);
   }
  })
 );
});

想成為service worker專家？上面的這些程式碼值得放到你的儲備庫裡。 火狐瀏覽器和Google瀏覽器都支援service worker，相信很快就會有更多的網站、app使用這種快取技術來提高運行速度。

以上是Javascript如何取得快取和清除快取API的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！