Explication détaillée de l'utilisation de cacheStorage dans les connaissances JavaScript_Basic

localStorage devrait être un nom familier ? Mais la famille du stockage local a bien plus à offrir que cela. Nous avons déjà parlé de sessionStorage, mais il existe désormais également un CacheStorage magique. Il est utilisé pour stocker les objets Response. En d’autres termes, il est utilisé pour mettre en cache les réponses HTTP. Bien que localStorage puisse également le faire, il est probablement plus spécialisé.
La référence à CacheStorage dans le navigateur est appelée caches au lieu de cacheStorage dans le cas camel, qui est défini dans la spécification ServiceWorker. CacheStorage est une collection de plusieurs Cache, et chaque Cache peut stocker plusieurs objets Response.
Fini les bêtises, voici la démo

<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>

Tout d'abord, appelez la méthode open sur les caches pour obtenir de manière asynchrone une référence à un objet Cache. Sur cet objet, nous pouvons mettre l'objet Response (les paramètres sont une URL et un objet Response) et utiliser la méthode match pour le récupérer (passer une URL et récupérer l'objet Response correspondant).
La méthode match peut non seulement être appelée sur Cache, mais il existe également une méthode match sur CacheStorage. Par exemple, dans l'exemple ci-dessus, deux Cache sont ouverts et une URL appelée /hehe y est écrite. Une fois l'opération d'écriture terminée, la méthode match est appelée sur le CacheStorage externe pour correspondre à /hehe. Le résultat est aléatoire (je ne trouve pas où cette règle est définie).
Bien que l'exemple ci-dessus ne place qu'une seule donnée dans l'objet Cache, l'objet Cache lui-même peut stocker plus de paires URL/Réponse. Et fournit des méthodes telles que la suppression (suppression de l'utilisateur) et les clés (pour la traversée). Cependant, Cache n'a pas de méthode claire comme localStorage. Si vous devez vider un cache, vous pouvez directement supprimer l'intégralité du cache sur CacheStorage et le rouvrir.
Cet ensemble d'API est le même que ServiceWorker. Il est généralement utilisé dans ServiceWorker. L'ensemble du style de conception est également basé sur Promise comme ServiceWorker.