JavaScript를 사용하여 캐시를 지우는 방법은 무엇입니까?

일반적으로 캐시라고 알려진 캐시는 자주 사용하는 데이터와 명령을 짧은 기간 동안 저장하는 컴퓨터의 다른 메모리 시스템입니다. 웹사이트를 로드할 때 우리가 사용하는 브라우저는 페이지를 다시 로드할 때 다시 사용할 수 있도록 이미지, 스크립트, 스타일시트와 같은 일부 리소스를 자동으로 캐시합니다. 이는 웹 사이트를 로드하는 데 걸리는 시간을 단축할 뿐만 아니라 네트워크를 통해 전송해야 하는 데이터의 양을 줄이는 데도 도움이 됩니다. 그러나 브라우저에 저장된 이러한 종류의 캐시에도 몇 가지 단점이 있습니다. 캐시된 리소스가 오래되었거나 브라우저가 캐시된 리소스를 사용하고 있기 때문에 페이지를 다시 로드할 수 없는 경우 문제가 발생할 수 있습니다. 이를 위해 때때로 이러한 캐시를 지워야 합니다.

사용자는 필요한 경우 JavaScript를 사용하여 브라우저의 캐시를 지울 수 있습니다. 이에 대한 설명은 아래에 있습니다 -

• location.reload() 메소드 - 현재 페이지를 다시 로드하고 캐싱을 비활성화하는 데 사용할 수 있는 효과적인 메소드 중 하나입니다. 사용자는 부울 값을 매개변수로 제공해야 하며 해당 값은 true로 설정되어야 합니다. 캐시된 버전을 사용하는 대신 이 기술은 브라우저가 서버에서 모든 리소스를 다시 로드하도록 합니다.

• navigator.serviceWorker.getRegistrations() 메소드 - navigator.serviceWorker 객체의 getRegistrations() 메소드를 사용하여 모든 서비스 워커 등록을 검색한 후 각 등록에 대해 unregister 메소드를 실행하는 대신 사용할 수 있습니다. 그러면 브라우저는 HTTP 캐시를 삭제합니다.

• caches.open() 및 캐시.delete() 메서드 - 이 메서드는 Cache API를 사용하여 명명된 캐시를 연 다음 delete() 메서드를 사용하여 캐시에서 특정 리소스를 삭제합니다.

• localStorage.clear() 및 sessionStorage.clear() 메서드- localStorage 개체에서 모든 키-값 쌍을 제거하려면 사용자는 localStorage.clear() 메서드를 사용할 수 있습니다. sessionStorage.clear() 함수는 sessionStorage 객체에서 모든 키-값 쌍을 삭제할 수 있습니다.

location.reload() 메소드를 사용하세요

부울 매개변수가 true로 설정되면 location.reload() 메서드는 현재 페이지를 캐시하지 않고 다시 로드합니다. 매개변수로 true를 지정하면 브라우저는 캐시된 복사본을 사용하는 대신 서버에서 직접 모든 리소스(이미지 및 스크립트 포함)를 다운로드합니다.

문법

으아악

위 구문에서 위치는 JavaScript의 전역 개체이며 위치 메서드를 오버로드합니다.

예

이 예에서는 location.reload() 메서드를 사용하여 JavaScript를 통해 캐시 메모리를 지웁니다. 우리는 "캐시 지우기" 버튼을 사용하고 이를 클릭 이벤트와 연결했습니다. 클릭 이벤트 핸들러는 매개변수가 true인 location.reload() 메서드를 실행합니다. 사용자가 버튼을 클릭할 때마다 JavaScript는 브라우저가 캐시된 파일 없이 웹 페이지를 다시 로드하도록 합니다.

으아악

웹페이지에 이 메시지가 표시되고 최신 파일을 빠르게 다시 로드합니다.

navigator.serviceWorker.getRegistrations() 메소드 사용

JavaScript에서 navigator.serviceWorker.getRegistrations() 메서드는 사용자가 모든 서비스 워커 스레드 등록을 등록 취소하여 캐시 메모리를 지울 수 있는 두 번째 방법이며, navigator.serviceWorker.getRegistrations( ) 메서드를 사용하여 지울 수 있습니다. 서버의 HTTP 캐시를 검색합니다. 웹 작업자의 한 유형은 서비스 작업자라고 하며 리소스 캐싱과 같은 백그라운드에서 많은 프로세스를 수행하는 데 사용됩니다. 브라우저는 모든 서비스 워커 등록을 비활성화하여 HTTP 캐시를 지워야 합니다.

문법

으아악

위 구문에서는 navigator 개체에서 "serviceWorker"을 사용할 수 있는지 확인합니다. 그런 다음 navigator.serviceWorker.getRegistrations() 및 registration.unregister() 메서드를 사용하여 서비스 워커를 등록 취소합니다.

예

이 예에서는 JavaScript를 사용하여 서비스 워커 등록을 취소하여 캐시를 지웁니다. 우리는 "캐시 지우기" 버튼을 사용하고 이를 클릭 이벤트와 연결했습니다. 클릭 이벤트 핸들러는 서비스 워커 등록을 취소하는 함수를 실행합니다. navigator.serviceWorker.getRegistrations() 및 registration.unregister() 메서드는 서비스 워커 등록을 취소하는 데 사용됩니다. 로그아웃하면 웹페이지에 메시지가 표시됩니다.

으아악

캐시를 지우는 것이 가장 좋은 방법이지만 모든 파일을 다시 가져와야 하기 때문에 때로는 웹페이지 성능에 영향을 미칠 수 있습니다. JavaScript에는 필요에 따라 사용할 수 있는 캐시를 지우는 기능이 있습니다.

위 내용은 JavaScript를 사용하여 캐시를 지우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!