JavaScript의 Polymer 프레임워크에 있는 동작 개체에 대한 간략한 설명

이 글에서는 주로 JavaScript의 Polymer 프레임워크에 있는 동작 개체를 소개합니다. Polymer는 Google에서 개발한 웹 UI 관련 프레임워크입니다. 필요한 친구들이 참고할 수 있습니다.

localStorage가 누구나 아는 이름이어야 할까요? 그러나 로컬 스토리지 제품군에는 그보다 훨씬 더 많은 것이 있습니다. 이전에 sessionStorage에 대해 이야기했지만 이제는 마법 같은 CacheStorage도 있습니다. 응답 객체를 저장하는 데 사용됩니다. 즉, HTTP 응답을 캐시하는 데 사용됩니다. localStorage도 이를 수행할 수 있지만 아마도 더 전문적일 것입니다.

브라우저에서 CacheStorage에 대한 참조는 ServiceWorker 사양에 정의된 카멜 케이스의 캐시Storage가 아닌 캐시입니다. CacheStorage는 여러 Cache의 모음이며 각 Cache는 여러 Response 개체를 저장할 수 있습니다.

더 이상 말도 안 되는 소리는 하지 마세요. 여기 데모가 있습니다

<script>
caches.delete(&#39;c1&#39;);
caches.delete(&#39;c2&#39;);
Promise.all([
 caches.open(&#39;c1&#39;).then(function(cache) {
  return cache.put(&#39;/hehe&#39;, new Response(&#39;aaa&#39;, { status: 200 }));
 }),
 caches.open(&#39;c2&#39;).then(function(cache) {
  return cache.put(&#39;/hehe&#39;, new Response(&#39;bbb&#39;, { status: 200 }));
 })
]).then(function() {
 return caches.match(&#39;/hehe&#39;);
}).then(function(response) {
 return response.text();
}).then(function(body) {
 console.log(body);
});
</script>

먼저 캐시에서 open 메서드를 호출하여 비동기적으로 Cache 개체에 대한 참조를 가져옵니다. 이 객체에 Response 객체(매개변수는 URL 및 Response 객체임)를 넣고 match 메소드를 사용하여 이를 검색할 수 있습니다(URL을 전달하고 해당 Response 객체를 검색함).

match 메소드는 Cache뿐만 아니라 CacheStorage에서도 호출할 수 있습니다. 예를 들어 위의 예에서는 두 개의 Cache를 열고 /hehe라는 URL을 작성합니다. 쓰기 작업이 완료된 후 외부 CacheStorage에서 match 메서드가 호출되어 /hehe와 일치합니다. 결과는 무작위입니다(이 규칙이 정의된 위치를 찾을 수 없습니다).

위의 예에서는 Cache 개체에 하나의 데이터만 넣지만 Cache 개체 자체는 더 많은 URL/응답 쌍을 저장할 수 있습니다. 그리고 삭제(사용자 삭제), 키(순회용) 등의 메소드를 제공합니다. 그러나 Cache에는 localStorage와 같은 명확한 방법이 없습니다. Cache를 지워야 하는 경우 CacheStorage에서 전체 Cache를 직접 삭제하고 다시 열 수 있습니다.

이 API는 ServiceWorker와 동일하며 ServiceWorker에서 주로 사용됩니다. 전체적인 디자인 스타일도 ServiceWorker와 같습니다.

위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요.