了解如何使用JavaScript中的Cache API緩存資源。

Cache API允許服務(wù)工作者對要緩存的資源（HTML頁面、CSS、JavaScript文件、圖片、JSON等）進(jìn)行控制。通過Cache API，服務(wù)工作者可以緩存資源以供脫機(jī)使用，并在以后檢索它們。

檢測Cache支持

檢查 caches 對象在 window 中是否可用。

let isCacheSupported = 'caches' in window;

caches 是 CacheStorage 的一個實(shí)例。

創(chuàng)建/初始化Cache

我們可以使用 open 方法創(chuàng)建一個具有 name 的緩存，這將返回 promise。如果緩存已經(jīng)存在，則不會創(chuàng)建新的緩存。

caches.open('cacheName').then( cache => {

});

你不能訪問為其他源(域)設(shè)置的緩存。

你正在創(chuàng)建的緩存將為你的域創(chuàng)建。

你可以為同一個域添加多個緩存，可以通過 caches.keys() 訪問。

將項目添加到緩存

可以使用三種方法 add，addAll，set 來緩存資源。 add() 和 addAll() 方法自動獲取資源并對其進(jìn)行緩存，而在 set 方法中，我們將獲取數(shù)據(jù)并設(shè)置緩存。

add

let cacheName = 'userSettings';

let url = '/api/get/usersettings';

caches.open(cacheName).then( cache => {

  cache.add(url).then( () => {

      console.log("Data cached ")

   });

});

在上面的代碼中，內(nèi)部對 /api/get/usersettings url的請求已發(fā)送到服務(wù)器，一旦接收到數(shù)據(jù)，響應(yīng)將被緩存。

addAll

addAll 接受URL數(shù)組，并在緩存所有資源時返回Promise。

let urls = ['/get/userSettings?userId=1', '/get/userDetails'];

caches.open(cacheName).then( cache => {

cache.addAll(urls).then( () => {

      console.log("Data cached ")

   });

});

Cache.add/Cache.addAll 不緩存 Response.status 值不在200范圍內(nèi)的響應(yīng)，Cache.put 可以讓你存儲任何請求/響應(yīng)對。

put

put 為當(dāng)前的 Cache 對象添加一個key/value對，在 put 中，我們需要手動獲取請求并設(shè)置值。

注意：put() 將覆蓋先前存儲在高速緩存中與請求匹配的任何鍵/值對。

let cacheName = 'userSettings';

let url = '/api/get/userSettings';

fetch(url).then(res => {

 return caches.open(cacheName).then(cache => {

   return cache.put(url, res);

 })

})

從緩存中檢索

使用 cache.match() 可以得到存儲到URL的 Response。

const cacheName = 'userSettings'

const url = '/api/get/userSettings'

caches.open(cacheName).then(cache => {

 cache.match(url).then(settings => {

   console.log(settings);

 }

});

settings 是一個響應(yīng)對象，它看起來像

Response {

 body: (...),

 bodyUsed: false,

 headers: Headers,

 ok: true,

 status: 200,

 statusText: "OK",

 type: "basic",

 url: "https://test.com/api/get/userSettings"

}

檢索緩存中的所有項目

cache 對象包含 keys 方法，這些方法將擁有當(dāng)前緩存對象的所有url。

caches.open(cacheName).then( (cache) => {

 cache.keys().then((arrayOfRequest) => {

     console.log(arrayOfRequest); // [Request,  Request]

 });

});

arrayOfRequest是一個Request對象數(shù)組，其中包含有關(guān)請求的所有詳細(xì)信息。

檢索所有緩存

caches.keys().then(keys => {

 // keys是一個數(shù)組，其中包含鍵的列表

})

從緩存中刪除項目

可以對 cache 對象使用 delete 方法來刪除特定的緩存請求。

let cacheName = userSettings;

let urlToDelete = '/api/get/userSettings';

caches.open(cacheName).then(cache => {

 cache.delete(urlToDelete)

})

完全刪除緩存

caches.delete(cacheName).then(() => {

  console.log('Cache successfully deleted!');

})

藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)