Beispielcode-Freigabe, wie Javascript den Cache abruft und die Cache-API löscht

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung des JavascriptAbrufensCache und des Löschens des CacheAPI vor. Jetzt werde ich es teilen mit Ihnen und geben Sie es auch. Lassen Sie es uns alle als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf

Der Vorteil der JavaScript ServiceWorker API besteht darin, dass Webentwickler damit das Caching einfach steuern können. Obwohl die Verwendung von Technologien wie ETags auch eine Technologie zur Cache-Steuerung ist, ermöglicht das Drücken von zur Verwendung von JavaScript dem Programm, die Cache-Funktion leistungsfähiger und freier zu steuern. Natürlich hat es seine Vor- und Nachteile, mächtig zu sein – man muss sich mit den Nachwirkungen auseinandersetzen, und die sogenannten Nachwirkungen bedeuten, den Cache zu bereinigen.

Sehen wir uns an, wie man ein Cache--Objekt erstellt, eine Anfrage zum Cache hinzufügt Cache-Daten und ein Anfrage aus dem Cache-Cache Daten und schließlich, wie man den Cache vollständig löscht.

Bestimmen Sie die Unterstützung des Browsers für die Cache-Objekt-Cache-API

Überprüfen Sie, ob der Browser die Cache-API unterstützt...

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

...Überprüfen Sie, ob es eine gibt Cache-Objekt im Fenster.

Erstellen Sie ein Cache-Objekt

Um ein Cache-Objekt zu erstellen, verwenden Sie Caches.open() und übergeben Sie den Namen des Caches:

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

Diese Methode „caches.open“ gibt ein Versprechen zurück, in dem das Cache-Objekt neu erstellt wird. Wenn es zuvor erstellt wurde, wird es nicht neu erstellt.

Cache-Daten hinzufügen

Für diesen Cache-Typ können Sie es sich als ein Request-Objekt-

Array vorstellen, die Antwortdaten werden von erhalten Anforderungsanforderung Der Schlüsselwert wird im Cache-Objekt gespeichert. Es gibt zwei Methoden, um Daten zum Cache hinzuzufügen: Hinzufügen und HinzufügenAlle. Verwenden Sie diese beiden Methoden, um die Adresse der zwischenzuspeichernden Anforderung hinzuzufügen. Eine Einführung in das Request-Objekt finden Sie im Artikel zur Fetch-API.

Verwenden Sie die addAll-Methode, um Cache-Anfragen stapelweise hinzuzufügen:

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

Diese addAll-Methode kann ein Adressarray als Parameter akzeptieren und die Antwortdaten dieser Anforderungsadressen werden zwischengespeichert das Cache-Objekt. addAll gibt ein Promise zurück. Um eine einzelne Adresse hinzuzufügen, verwenden Sie die Add-Methode:

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

Auf Cache-Daten zugreifen

Um die geänderten Anforderungsdaten anzuzeigen, können wir die Taste

verwenden im Cache-Objekt s()-Methode, um alle zwischengespeicherten Anforderungsobjekte in Array-Form abzurufen:

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"
}
*/

Wenn Sie den Antwortinhalt der zwischengespeicherten Anforderungsanforderung anzeigen möchten, können Sie Cache.match verwenden () oder Cache.matchAll ()-Methode:

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"
}
*/

Informationen zur Verwendung und Details des Response-Objekts finden Sie im Artikel zur Fetch-API.

Daten im Cache löschen

Um Daten aus dem Cache zu löschen, können wir die Methode

delete() im Cache-Objekt verwenden:

caches.open('test-cache').then(function(cache) {
 cache.delete('/page/1');
});

Auf diese Weise befinden sich keine /page/1-Anfragedaten mehr im Cache.

Den Cache-Namen im vorhandenen Cache abrufen

Um den Namen der zwischengespeicherten Daten abzurufen, die bereits im Cache vorhanden sind, müssen wir den Caches.keys( )-Methode:

caches.keys().then(function(cacheKeys) { 
 console.log(cacheKeys); // ex: ["test-cache"]
});

window.caches.keys() gibt auch ein Promise zurück.

Ein Cache-Objekt löschen

Um ein Cache-Objekt zu löschen, benötigen Sie nur den Cache-Schlüsselnamen:

caches.delete('test-cache').then(function() { 
 console.log('Cache successfully deleted!'); 
});

Anleitung Massenlöschung alter zwischengespeicherter Daten:

// 假设`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);
   }
  })
 );
});

Möchten Sie Servicemitarbeiter-Experte werden? Es lohnt sich, den obigen Code zu Ihrem Repository hinzuzufügen.

Firefox und Google Chrome unterstützen beide Servicemitarbeiter. Ich glaube, dass bald mehr Websites und Apps diese Caching-Technologie nutzen werden, um die Ausführungsgeschwindigkeit zu verbessern.

Das obige ist der detaillierte Inhalt vonBeispielcode-Freigabe, wie Javascript den Cache abruft und die Cache-API löscht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!