Javascript가 캐시를 획득하고 캐시 API를 지우는 방법에 대한 샘플 코드 공유

이번 글에서는 JavascriptGettingCache와 Clearing CacheAPI에 대한 자세한 설명을 주로 소개합니다. 여러분과도 주고, 모두 참고로 활용합시다. 에디터를 따라가며 살펴보겠습니다

JavaScript ServiceWorker API의 장점은 웹 개발자가 쉽게 캐싱을 제어할 수 있다는 점입니다. ETags와 같은 기술을 사용하는 것도 캐시를 제어하는 ​​기술이지만, 을 눌러 자바스크립트를 사용하면 프로그램이 보다 강력하고 자유롭게 캐시 기능을 제어할 수 있습니다. 물론 강력하다는 것에는 장점과 단점이 있습니다. 여파를 처리해야 하며 소위 여파는 캐시를 청소하는 것을 의미합니다.

캐시객체를 생성하고, 캐시 캐시 데이터에 요청을 추가하고, 삭제 캐시에서 캐시 데이터를 요청하고 마지막으로 캐시를 완전히 삭제하는 방법입니다.

브라우저가 캐시 객체에 대한 캐시 API를 지원하는지 확인

브라우저가 캐시 API를 지원하는지 확인...

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

...캐시가 있는지 확인 창에 있는 물체.

캐시 객체 생성

캐시 객체를 생성하려면, cashs.open()을 사용하고 캐시 이름을 전달합니다:

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

이 캐시.open 메소드는 캐시 객체가 새로 생성되는 Promise를 반환합니다. 이전에 생성된 경우 다시 생성되지 않습니다.

캐시 데이터 추가

이러한 유형의 캐시의 경우 요청 개체

배열으로 생각하면 됩니다. 요청 요청 키 값은 캐시 개체에 저장됩니다. 캐시에 데이터를 추가하는 방법에는 add와 addAll 두 가지가 있습니다. 캐시할 요청의 주소를 추가하려면 이 두 가지 방법을 사용하세요. Request 객체에 대한 소개는 fetch API 문서를 참조하세요.

일괄적으로 캐시 요청을 추가하려면 addAll 메소드를 사용하십시오.

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

이 addAll 메소드는 주소 배열을 매개변수로 허용할 수 있으며 이러한 요청 주소의 응답 데이터는 캐시에 캐시됩니다. 물체. addAll은 약속을 반환합니다. add 메소드를 사용하여 단일 주소를 추가하세요:

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

캐시 데이터 액세스

변경된 요청 데이터를 보려면 다음에서

키s() 메소드를 사용하여 캐시된 모든 Request 객체를 배열 형식으로 가져옵니다:

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

캐시된 Request 요청의 응답 내용을 보려면 캐시.match() 또는 캐시를 사용할 수 있습니다. matchAll() 메소드:

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

Response 객체의 사용법과 자세한 내용은 fetch API 글을 참고하세요.

캐시에서 데이터 삭제

캐시에서 데이터를 삭제하려면 캐시 객체에서

delete

() 메소드를 사용할 수 있습니다.

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

이렇게 하면 더 이상 /page/1 요청 데이터가 캐시에 남지 않게 됩니다.

기존 캐시에서 캐시 이름 가져오기

캐시에 이미 존재하는 캐시된 데이터의 이름을 가져오려면 cashs.keys( ) 메서드:

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

window.caches.keys()도 Promise를 반환합니다.

캐시 개체 삭제

캐시 개체를 삭제하려면 캐시 키 이름만 필요합니다:

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

많음 삭제 방법 오래된 캐시 데이터:

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

서비스 워커 전문가가 되고 싶나요? 위의 코드는 저장소에 추가할 가치가 있습니다.

Firefox

와 Google Chrome은 모두 서비스 워커를 지원합니다. 조만간 더 많은 웹사이트와 앱이 이 캐싱 기술을 사용하여 실행 속도를 향상할 것이라고 믿습니다.

위 내용은 Javascript가 캐시를 획득하고 캐시 API를 지우는 방법에 대한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!