建站
咨詢
售后
建站咨詢
新聞中心
了解如何使用JavaScript中的Cache API緩存資源。
Cache API允許服務(wù)工作者對(duì)要緩存的資源(HTML頁面、CSS、JavaScript文件、圖片、JSON等)進(jìn)行控制。通過Cache API，服務(wù)工作者可以緩存資源以供脫機(jī)使用，并在以后檢索它們。
檢測(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 => {
- });
- 你不能訪問為其他源(域)設(shè)置的緩存。
- 你正在創(chuàng)建的緩存將為你的域創(chuàng)建。
- 你可以為同一個(gè)域添加多個(gè)緩存，可以通過 caches.keys() 訪問。
將項(xiàng)目添加到緩存
可以使用三種方法 add，addAll，set 來緩存資源。 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ì)。
從緩存中檢索
使用 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ì)象，它看起來像
- 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 方法來刪除特定的緩存請(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!');
- })
文章名稱：JavaScript中的緩存API
URL網(wǎng)址：http://www.5511xx.com/article/cocjphp.html
