JavaScript中的緩存API

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

Cache API容許服務工做者對要緩存的資源（HTML頁面、CSS、JavaScript文件、圖片、JSON等）進行控制。經過Cache API，服務工做者能夠緩存資源以供脫機使用，並在之後檢索它們。

檢測Cache支持

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

let isCacheSupported = 'caches' in window;

caches 是 CacheStorage 的一個實例。

建立/初始化Cache

咱們能夠使用 open 方法建立一個具備 name 的緩存，這將返回 promise。若是緩存已經存在，則不會建立新的緩存。

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

• 你不能訪問爲其餘源(域)設置的緩存。
• 你正在建立的緩存將爲你的域建立。
• 你能夠爲同一個域添加多個緩存，能夠經過 caches.keys() 訪問。

將項目添加到緩存

能夠使用三種方法 add，addAll，set 來緩存資源。 add() 和 addAll() 方法自動獲取資源並對其進行緩存，而在 set 方法中，咱們將獲取數據並設置緩存。

add

let cacheName = 'userSettings'; 
let url = '/api/get/usersettings';
caches.open(cacheName).then( cache => {
   cache.add(url).then( () => {
       console.log("Data cached ")
    });
});

在上面的代碼中，內部對 /api/get/usersettings url的請求已發送到服務器，一旦接收到數據，響應將被緩存。

addAll

addAll 接受URL數組，並在緩存全部資源時返回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範圍內的響應，Cache.put 能夠讓你存儲任何請求/響應對。

put

put 爲當前的 Cache 對象添加一個key/value對，在 put 中，咱們須要手動獲取請求並設置值。

注意：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 是一個響應對象，它看起來像

Response {
  body: (...),
  bodyUsed: false,
  headers: Headers,
  ok: true,
  status: 200,
  statusText: "OK",
  type: "basic",
  url: "https://test.com/api/get/userSettings"
}

檢索緩存中的全部項目

cache 對象包含 keys 方法，這些方法將擁有當前緩存對象的全部url。

caches.open(cacheName).then( (cache) => { 
  cache.keys().then((arrayOfRequest) => { 
      console.log(arrayOfRequest); // [Request,  Request]
  });
});

arrayOfRequest是一個Request對象數組，其中包含有關請求的全部詳細信息。

檢索全部緩存

caches.keys().then(keys => {
  // keys是一個數組，其中包含鍵的列表
})

從緩存中刪除項目

能夠對 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!');
})

---

來源：https://medium.com/javascript-dots，做者：Jeep，翻譯：公衆號《前端全棧開發者》