JavaScript中有哪些緩存API，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)建站-專業(yè)網站定制、快速模板網站建設、高性價比白城網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式白城網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋白城地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。

檢測Cache支持

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

let isCacheSupported = 'caches' in window;

caches 是 CacheStorage 的一個實例。

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

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

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

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

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

• 你可以為同一個域添加多個緩存，可以通過 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的請求已發(fā)送到服務器，一旦接收到數據，響應將被緩存。

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

關于JavaScript中有哪些緩存API問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關知識。