JavaScript中有什么緩存API

這篇文章主要介紹了JavaScript中有什么緩存API的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇JavaScript中有什么緩存API文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請(qǐng)域名、雅安服務(wù)器托管、營(yíng)銷軟件、網(wǎng)站建設(shè)、正安網(wǎng)站維護(hù)、網(wǎng)站推廣。

檢測(cè)Cache支持

檢查 caches 對(duì)象在 window 中是否可用。

let isCacheSupported = 'caches' in window;

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

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

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

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

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

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

• 你可以為同一個(gè)域添加多個(gè)緩存，可以通過(guò) caches.keys() 訪問(wèn)。

將項(xiàng)目添加到緩存

可以使用三種方法 add，addAll，set 來(lái)緩存資源。add() 和 addAll() 方法自動(dòng)獲取資源并對(duì)其進(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)部對(duì) /api/get/usersettings url的請(qǐng)求已發(fā)送到服務(wù)器，一旦接收到數(shù)據(jù)，響應(yīng)將被緩存。

addAll

addAll 接受URL數(shù)組，并在緩存所有資源時(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  可以讓你存儲(chǔ)任何請(qǐng)求/響應(yīng)對(duì)。

put

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

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

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() 可以得到存儲(chǔ)到URL的 Response。

const cacheName = 'userSettings' const url = '/api/get/userSettings' caches.open(cacheName).then(cache => {   cache.match(url).then(settings => {     console.log(settings);   } });

settings 是一個(gè)響應(yīng)對(duì)象，它看起來(lái)像

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

檢索緩存中的所有項(xiàng)目

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

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

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

檢索所有緩存

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

從緩存中刪除項(xiàng)目

可以對(duì) cache 對(duì)象使用 delete 方法來(lái)刪除特定的緩存請(qǐng)求。

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

關(guān)于“JavaScript中有什么緩存API”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“JavaScript中有什么緩存API”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享名稱：JavaScript中有什么緩存API
本文地址：http://muchs.cn/article6/ipioig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、全網(wǎng)營(yíng)銷推廣、微信小程序、自適應(yīng)網(wǎng)站、商城網(wǎng)站、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)