2020-7-8 seo達人
了解如何使用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!');
})
藍藍設計( www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務