브라우저 캐시를 프로그래밍적으로 비우는 방법은?

브라우저 캐시를 프로그래밍적으로 비우는 방법은?

브라우저 캐시를 프로그래밍 방식으로 비울 수 있는 방법을 찾고 있습니다.애플리케이션이 기밀 데이터를 캐시하기 때문에 이렇게 하는 것이고, "로그아웃"을 누르면 해당 데이터를 제거하고 싶습니다.이것은 서버나 자바스크립트를 통해서 일어날 수 있습니다.물론 키로거와 같은 위험 요소가 더 많기 때문에 외산/공용 컴퓨터에서 소프트웨어를 사용하는 것은 여전히 권장되지 않습니다.

2023년 업데이트:서버가 클라이언트 웹 브라우저에 도메인/하위 도메인에 대한 웹 사이트 캐시를 지우도록 지시할 수 있는 HTTP 헤더 참조Cache-Control머리글중간 캐시에는 데이터가 여전히 캐시되어 있을 수 있으며 헤더를 존중하지 않을 수도 있습니다.(고맙습니다, @nishanshanmougham)

브라우저가 캐시를 지울 수 있는 방법은 없습니다.만약 그것이 가능하다면 그것은 엄청난 보안 문제가 될 것입니다.브라우저가 이러한 "기능"을 지원하는 순간 컴퓨터에서 이 기능을 제거하는 순간 이 기능은 매우 쉽게 남용될 수 있습니다.

적절한 헤더를 보내거나 다음 메타 태그를 사용하여 페이지를 캐시하지 않도록 하는 것이 가능합니다.

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

양식 필드에서 자동 완성을 해제하는 방법도 고려해 볼 수 있습니다(이 질문 참조).

그럼에도 불구하고 중요한 데이터를 사용하는 경우 SSL을 사용해야 한다는 점을 지적하고 싶습니다.SSL을 사용하지 않는 경우 네트워크에 액세스할 수 있는 사용자는 누구나 네트워크 트래픽을 스니핑하여 사용자가 보고 있는 내용을 쉽게 볼 수 있습니다.

SSL을 사용하면 일부 브라우저는 명시적으로 지시하지 않는 한 캐싱을 사용하지 않게 됩니다.이 질문을 보세요.

jQuery를 사용하여 캐시 상태를 참조하는 '메타 태그'를 이벤트 핸들러 / 버튼으로 대체한 후 새로 고침 하면 됩니다.

$('.button').click(function() {
    $.ajax({
        url: "",
        context: document.body,
        success: function(s,x){

            $('html[manifest=saveappoffline.appcache]').attr('content', '');
                $(this).html(s);
        }
    }); 
});

참고: 이 솔루션은 HTML 5 사양의 일부로 구현된 Application Cache에 의존합니다.또한 앱 캐시 매니페스트를 설정하려면 서버 구성이 필요합니다.클라이언트 또는 서버 측 코드를 통해 '전통적인' 브라우저 캐시를 클리어할 수 있는 방법은 설명되어 있지 않으며, 이는 거의 불가능합니다.

html 자체를 사용합니다.사용할 수 있는 한 가지 요령이 있습니다.이 방법은 스크립트 태그의 파일 이름에 매개 변수/ 문자열을 추가하고 파일 변경 시 변경하는 것입니다.

<script src="myfile.js?version=1.0.0"></script>

브라우저는 "?" 다음에 오는 것이 매개 변수일지라도 전체 문자열을 파일 경로로 해석합니다.따라서 다음 번에 파일을 업데이트할 때 웹 사이트의 스크립트 태그에 있는 번호만 변경하면 됩니다(예:<script src="myfile.js?version=1.0.1"></script>및각된 것을 하고 새 및 각 사용자 브라우저는 파일이 변경된 것을 확인하고 새 복사본을 가져옵니다.

가장 좋은 아이디어는 이름을 가진 js 파일 생성 + 버전을 가진 약간의 해시를 만드는 것입니다. 만약 당신이 캐시를 지우고, 새로운 해시를 가진 새로운 파일을 생성해야 한다면, 이것은 브라우저가 새로운 파일을 로드하도록 트리거할 것입니다.

캐시.delete()를 사용하여 모든 브라우저 네트워크 캐시를 삭제하는 방법을 한 줄로 나타냅니다.

caches.keys().then((keyList) => Promise.all(keyList.map((key) => caches.delete(key))))

Chrome 40+, Firefox 39+, Opera 27+ 및 Edge에서 작동합니다.

Chrome에서는 벤치마킹 확장을 사용하여 이 작업을 수행할 수 있어야 합니다.다음 스위치로 크롬을 시작해야 합니다.

./chrome --enable-benchmarking --enable-net-benchmarking 

이제 Chrome의 콘솔에서 다음 작업을 수행할 수 있습니다.

chrome.benchmarking.clearCache();
chrome.benchmarking.clearHostResolverCache();
chrome.benchmarking.clearPredictorCache();
chrome.benchmarking.closeConnections();

위 명령에서 알 수 있듯이 브라우저 캐시를 지울 뿐만 아니라 DNS 캐시를 지우고 네트워크 연결을 닫습니다.페이지 로드 시간 벤치마크를 수행할 때 유용합니다.필요하지 않으면 모두 사용할 필요가 없음이 분명합니다(예: clearCache()는 캐시만 지우고 DNS 캐시와 연결에 신경 쓰지 않는 경우에 충분합니다).

처음에는 브라우저 캐시를 클리어하기 위해 html, JS에서 다양한 프로그래밍 방식을 시도했습니다.최신 Chrome에서는 아무것도 작동하지 않습니다.

결국 .htaccess:

<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

Chrome, Firefox, Opera에서 테스트됨

참조 : https://wp-mix.com/disable-caching-htaccess/

사용자 에이전트가 사이트의 로컬에 저장된 데이터를 지우도록 지시하는 Clear Site Data 지시문으로 서버가 응답하도록 할 수 있습니다.

예를 들어,

Clear-Site-Data: "cache", "cookies", "storage"

이 헤더는 사용자 에이전트가 다음을 포함하여 로컬에 저장된 모든 데이터를 지우도록 지시합니다.

• 네트워크 캐시
• 사용자 에이전트 캐시(예: 사전 대여된 페이지, 스크립트 캐시 등)
• 쿠키
• HTTP 인증 정보
• 오리진 바인딩 토큰(채널 ID 및 토큰 바인딩 등)
• 로컬스토리지
• 세션 저장소
• 인덱스DB
• 웹 SQL 데이터베이스
• 서비스 작업자 등록

다음을 사용하여 요청을 보낼 수 있습니다.fetch()그리고 할location.reload()그 후에 다시 시작할 수 있을 겁니다.

location.reload(true); 캐시를 무시하고 현재 페이지를 하드 로드합니다.
캐시.delete()는 새로운 크롬, 파이어폭스, 오페라에도 사용할 수 있습니다.

이제 Cache.delete()를 사용할 수 있습니다.

예:

let id = "your-cache-id";
// you can find the id by going to 
// application>storage>cache storage 
// (minus the page url at the end)
// in your chrome developer console 

caches.open(id)
.then(cache => cache.keys()
  .then(keys => {
    for (let key of keys) {
      cache.delete(key)
    }
  }));

Chrome 40+, Firefox 39+, Opera 27+ 및 Edge에서 작동합니다.

//The code below should be put in the "js" folder with the name "clear-browser-cache.js"

(function () {
    var process_scripts = false;
    var rep = /.*\?.*/,
    links = document.getElementsByTagName('link'),
    scripts = document.getElementsByTagName('script');
    var value = document.getElementsByName('clear-browser-cache');
    for (var i = 0; i < value.length; i++) {
        var val = value[i],
            outerHTML = val.outerHTML;
        var check = /.*value="true".*/;
        if (check.test(outerHTML)) {
            process_scripts = true;
        }
    }
    for (var i = 0; i < links.length; i++) {
        var link = links[i],
        href = link.href;
        if (rep.test(href)) {
            link.href = href + '&' + Date.now();
        }
        else {
            link.href = href + '?' + Date.now();
        }
    }
    if (process_scripts) {
        for (var i = 0; i < scripts.length; i++) {
            var script = scripts[i],
            src = script.src;
            if (src !== "") {
                if (rep.test(src)) {
                    script.src = src + '&' + Date.now();
                }
                else {
                    script.src = src + '?' + Date.now();
                }
            }
        }
    }
})();

At the end of the tah head, place the line at the code below

    < script name="clear-browser-cache" src='js/clear-browser-cache.js' value="true" >< /script >

캐시에 대한 함수를 정의하면 메타 태그가 무효화됩니다.

function addMetaTag(name,content){
var meta = document.createElement('meta');
meta.httpEquiv = name;
meta.content = content;
document.getElementsByTagName('head')[0].appendChild(meta);
}

전화 가능:

addMetaTag("pragma","no-cache")
addMetaTag("expires","0")
addMetaTag("cache-control","no-cache")

그러면 후속 요청에 대한 메타 태그가 삽입되어 브라우저가 새 콘텐츠를 가져오게 됩니다.삽입 후 전화를 걸 수 있습니다.location.reload()그리고 이것은 대부분의 브라우저에서 작동할 것입니다 (Cache.delete()예를 들어 크롬에서 작동하지 않습니다.)

개발상의 이유로 브라우저의 캐시를 지웁니다.데이터 스키마 변경 시 로컬 스토리지, 세션 스토리지, IndexDB, 쿠키 등 삭제지우지 않으면 데이터를 데이터베이스와 동기화할 때 데이터 손상이 발생할 수 있습니다.또한 OP가 제안한 것처럼 보안상의 이유로 캐시를 삭제할 수도 있습니다.

이것이 제가 사용하는 코드입니다.

caches.keys().then(list => list.map(key => caches.delete(key)))

간단해요, 매력적인 것 같아요.자세한 내용:

https://developer.mozilla.org/en-US/docs/Web/API/Cache

이매진 더.js파일은 에 배치됩니다./my-site/some/path/ui/js/myfile.js

따라서 일반적으로 스크립트 태그는 다음과 같이 나타납니다.

<script src="/my-site/some/path/ui/js/myfile.js"></script>

이제 다음으로 변경합니다.

<script src="/my-site/some/path/ui-1111111111/js/myfile.js"></script>

물론 그것은 효과가 없을 것입니다.작동하려면 한 줄 또는 몇 줄을 추가해야 합니다..htaccess중요한 행은 다음과 같습니다. (아래쪽의 .htaccess 전체)

RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]

그래서 이게 하는 일은, 일종의, 그것이1111111111경로 및 링크에서 올바른 경로로 이동합니다.

그래서 이제 당신이 변경을 한다면 당신은 숫자를 바꾸기만 하면 됩니다.1111111111당신이 원하는 숫자만큼요그리고 파일을 포함하더라도 js-file이 마지막으로 수정되었을 때 타임스탬프를 통해 그 숫자를 설정할 수 있습니다.따라서 숫자가 변하지 않으면 캐시가 정상적으로 작동합니다.브라우저가 완전히 새로운 URL이기 때문에 변경되면 새 파일(YES ALWAYS)을 제공합니다. 그리고 파일이 너무 새로워서 파일을 가져와야 합니다.

사용하실 수 있습니다.CSS,favicons캐시에 저장되는 모든 것을 말입니다.CSS의 경우 그냥 그렇게 사용합니다.

<link href="http://my-domain.com/my-site/some/path/ui-1492513798/css/page.css" type="text/css" rel="stylesheet">

그리고 잘 될 겁니다!업데이트가 간단하며 유지보수가 간단합니다.

약속된 전체 .ht 액세스

아직 .htaccess가 없는 경우 이는 필요한 최소한의 값입니다.

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
</IfModule>

언급URL : https://stackoverflow.com/questions/8155064/how-to-programmatically-empty-browser-cache