localStorage sollte ein bekannter Name sein? Aber die lokale Speicherfamilie bietet noch viel mehr. Wir haben bereits über sessionStorage gesprochen, aber jetzt gibt es auch einen magischen CacheStorage. Es wird zum Speichern von Antwortobjekten verwendet. Mit anderen Worten: Es wird zum Zwischenspeichern von HTTP-Antworten verwendet. Obwohl localStorage dies auch kann, ist es wahrscheinlich spezialisierter.
Der Verweis auf CacheStorage im Browser wird in der Kamel-Schreibweise als Caches und nicht als CacheStorage bezeichnet, was in der ServiceWorker-Spezifikation definiert ist. CacheStorage ist eine Sammlung mehrerer Caches, und jeder Cache kann mehrere Antwortobjekte speichern.
Kein Unsinn mehr, hier ist die Demo
<script>
caches.delete('c1');
caches.delete('c2');
Promise.all([
caches.open('c1').then(function(cache) {
return cache.put('/hehe', new Response('aaa', { status: 200 }));
}),
caches.open('c2').then(function(cache) {
return cache.put('/hehe', new Response('bbb', { status: 200 }));
})
]).then(function() {
return caches.match('/hehe');
}).then(function(response) {
return response.text();
}).then(function(body) {
console.log(body);
});
</script>
Rufen Sie zunächst die open-Methode für Caches auf, um asynchron einen Verweis auf ein Cache-Objekt abzurufen. In dieses Objekt können wir das Response-Objekt einfügen (die Parameter sind eine URL und ein Response-Objekt) und die Match-Methode verwenden, um es abzurufen (eine URL übergeben und das entsprechende Response-Objekt abrufen).
Die Match-Methode kann nicht nur für Cache aufgerufen werden, sondern es gibt auch eine Match-Methode für CacheStorage. Im obigen Beispiel werden beispielsweise zwei Caches geöffnet und eine URL namens /hehe in sie geschrieben. Nachdem der Schreibvorgang abgeschlossen ist, wird die Match-Methode auf dem externen CacheStorage aufgerufen, um mit /hehe übereinzustimmen. Das Ergebnis ist zufällig (ich kann nicht finden, wo diese Regel definiert ist).
Obwohl im obigen Beispiel nur ein Datenelement in das Cache-Objekt eingefügt wird, kann das Cache-Objekt selbst mehr URL/Antwort-Paare speichern. Und stellt Methoden wie delete (Benutzerlöschung) und Schlüssel (zum Durchlaufen) bereit. Allerdings verfügt der Cache nicht über eine Clear-Methode wie localStorage. Wenn Sie einen Cache leeren müssen, können Sie den gesamten Cache direkt auf CacheStorage löschen und erneut öffnen.
Dieser API-Satz ist derselbe wie ServiceWorker. Er wird normalerweise in ServiceWorker verwendet. Der gesamte Designstil basiert ebenfalls auf Promise.
