JavaScript_Basic 지식에서 캐시스토리지 사용법에 대한 자세한 설명

localStorage는 누구나 아는 이름이어야 합니까? 그러나 로컬 스토리지 제품군에는 그보다 훨씬 더 많은 것이 있습니다. 이전에 sessionStorage에 대해 이야기했지만 이제는 마법 같은 CacheStorage도 있습니다. 응답 객체를 저장하는 데 사용됩니다. 즉, HTTP 응답을 캐시하는 데 사용됩니다. localStorage도 이를 수행할 수 있지만 아마도 더 전문적일 것입니다.
브라우저의 CacheStorage에 대한 참조는 ServiceWorker 사양에 정의된 Camel의 경우 캐시Storage 대신 캐시라고 합니다. CacheStorage는 여러 Cache의 모음이며 각 Cache는 여러 Response 개체를 저장할 수 있습니다.
더 이상 말도 안되는 소리는 하지 마세요. 여기 데모가 있습니다

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

먼저, 캐시에서 open 메소드를 호출하여 Cache 객체에 대한 참조를 비동기적으로 가져옵니다. 이 객체에 Response 객체(매개변수는 URL 및 Response 객체임)를 넣고 match 메소드를 사용하여 이를 검색할 수 있습니다(URL을 전달하고 해당 Response 객체를 검색함).
match 메소드는 Cache에서만 호출할 수 있는 것이 아니라 CacheStorage에도 match 메소드가 있습니다. 예를 들어 위의 예에서는 두 개의 Cache가 열리고 여기에 /hehe라는 URL이 기록됩니다. 쓰기 작업이 완료된 후 외부 CacheStorage에서 match 메서드가 호출되어 /hehe와 일치합니다. 결과는 무작위입니다(이 규칙이 정의된 위치를 찾을 수 없습니다).
위의 예에서는 Cache 개체에 하나의 데이터만 저장하지만 Cache 개체 자체는 더 많은 URL/응답 쌍을 저장할 수 있습니다. 그리고 삭제(사용자 삭제), 키(순회용) 등의 메소드를 제공합니다. 그러나 Cache에는 localStorage와 같은 명확한 방법이 없습니다. Cache를 지워야 하는 경우 CacheStorage에서 전체 Cache를 직접 삭제하고 다시 열 수 있습니다.
이 API 세트는 ServiceWorker와 동일하며 일반적으로 ServiceWorker에서 사용됩니다. 전체 디자인 스타일도 ServiceWorker와 마찬가지로 Promise를 기반으로 합니다.