Javascript がキャッシュを取得し、キャッシュ API をクリアする方法を示すサンプル コードの共有

この記事では主にJavascriptgetcacheとキャッシュクリアAPIの詳細な説明を紹介していますが、編集者が非常に優れていると思ったので、参考として共有します。エディターをフォローして一緒に見てみましょう

JavaScript ServiceWorker API の利点は、Web 開発者がキャッシュを簡単に制御できることです。 ETag などの技術を使用することもキャッシュを制御する技術ですが、JavaScript を使用する を押すと、プログラムによるキャッシュの制御がより強力かつ無料になります。もちろん、強力であることには長所と短所があります。余波に対処する必要があり、いわゆる余波とはキャッシュをクリーンアップすることを意味します。

キャッシュ オブジェクト を作成する方法、キャッシュにリクエスト キャッシュ データ を追加する方法、キャッシュから リクエスト キャッシュ データを削除する方法、そして最後にキャッシュを完全に削除する方法を見てみましょう。 キャッシュ オブジェクトのキャッシュ API に対するブラウザのサポートを確認します

ブラウザがキャッシュ API をサポートしているかどうかを確認します…

if('caches' in window) {
 // Has support!
}

…ウィンドウ内にキャッシュ オブジェクトがあるかどうかを確認します。

キャッシュ オブジェクトを作成する

キャッシュ オブジェクトを作成する方法は、caches.open() を使用し、キャッシュ名を渡すことです:

caches.open('test-cache').then(function(cache) {
 // 缓存创建完成，现在就可以访问了
});

このcaches.open メソッドは、キャッシュ オブジェクトが含まれる Promise を返します。新しく作成されますが、以前に作成されている場合は再作成されません。

キャッシュ データの追加

このタイプのキャッシュでは、Request オブジェクト

array

として考えることができます。Request リクエストによって取得された応答データは、キー値によってキャッシュ オブジェクトに格納されます。キャッシュにデータを追加するには、add と addAll の 2 つの方法があります。これら 2 つの方法を使用して、キャッシュするリクエストのアドレスを追加します。 Request オブジェクトの概要については、フェッチ API の記事を参照してください。 キャッシュ リクエストをバッチで追加するには、addAll メソッドを使用します。

caches.open('test-cache').then(function(cache) { 
 cache.addAll(['/', '/images/logo.png'])
  .then(function() { 
   // Cached!
  });
});

この addAll メソッドはパラメータとしてアドレス配列を受け入れることができ、これらのリクエスト アドレスの応答データはキャッシュ オブジェクトにキャッシュされます。 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);
 });
});

キャッシュ データにアクセスします

変更されたリクエスト データを表示するには、キャッシュ オブジェクトの

key

s() メソッドを使用して、キャッシュされたすべてのリクエスト オブジェクトを配列形式で取得できます。 :

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 オブジェクトの使用法と詳細については、次のことができます。フェッチ API の記事を参照してください。

キャッシュ内のデータを削除する

キャッシュからデータを削除するには、キャッシュ オブジェクトの

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のエキスパートになりたいですか?上記のコードはリポジトリに追加する価値があります。

Firefox

と Google Chrome はどちらも Service Worker をサポートしており、実行速度を向上させるためにこのキャッシュ テクノロジーを使用する Web サイトやアプリが間もなく増えると思います。

以上がJavascript がキャッシュを取得し、キャッシュ API をクリアする方法を示すサンプル コードの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。