本篇文章主要介紹了詳解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中文網其他相關文章！
