자바 스크립트에서 캐시 지우기

JavaScript로 브라우저 캐시를 지우려면 어떻게해야합니까?

최신 JavaScript 코드를 배포했지만 최신 JavaScript 코드를 얻을 수 없습니다.

편집자 주 :이 질문은 다음과 같은 장소에서 반복 제되었으며 다음 질문 중 첫 번째 질문에 대한 답이 가장 좋습니다. 이 대답은 더 이상 이상적인 솔루션이 아닙니다.

브라우저가 캐시 된 CSS / JS 파일을 강제로 다시로드하는 방법?

클라이언트가 JavaScript 파일을 새로 고치도록하려면 어떻게해야합니까?

로컬 자바 스크립트 소스 / Json 데이터를 동적으로 다시로드

window.location.reload (true) 를 호출 하여 현재 페이지를 다시로드 할 수 있습니다 . 캐시 된 항목을 무시하고 서버에서 페이지, CSS, 이미지, JavaScript 등의 새 사본을 검색합니다. 전체 캐시를 지우지는 않지만 현재있는 페이지의 캐시를 지우는 효과가 있습니다.

그러나 최선의 전략은 다양한 다른 답변에서 언급 한 것처럼 경로 또는 파일 이름을 버전 화하는 것입니다. 또한 파일 이름 수정 :?v=n 버전 관리 체계 로 사용하지 않는 이유로 쿼리 문자열 을 사용하지 마십시오를 참조하십시오 .

자바 스크립트로 캐시를 지울 수 없습니다. 일반적인 방법은 다음과 같이 수정 번호 또는 마지막으로 업데이트 된 타임 스탬프를 파일에 추가하는 것입니다.

myscript.123.js

또는

myscript.js?updated=1234567890

JavaScript 파일의 src를 변경해 보시겠습니까? 이것으로부터:

<script language="JavaScript" src="js/myscript.js"></script>

이에:

<script language="JavaScript" src="js/myscript.js?n=1"></script>

이 메소드는 브라우저가 JS 파일의 새 사본을로드하도록합니다.

매시간 또는 매주 캐싱하는 것 외에 파일 데이터에 따라 캐싱 할 수 있습니다.

예 (PHP) :

<script src="js/my_script.js?v=<?=md5_file('js/my_script.js')?>"></script>

또는 파일 수정 시간을 사용하십시오.

<script src="js/my_script.js?v=<?=filemtime('js/my_script.js')?>"></script>

PHP에서 다음과 같이 매시간마다 코드를 강제로 다시로드 할 수도 있습니다.

<?php
echo '<script language="JavaScript" src="js/myscript.js?token='.date('YmdH').'">';
?>

또는

<script type="text/javascript" src="js/myscript.js?v=<?php echo date('YmdHis'); ?>"></script>

이것을 템플릿 끝에 넣으십시오.

var scripts =  document.getElementsByTagName('script');
var torefreshs = ['myscript.js', 'myscript2.js'] ; // list of js to be refresh
var key = 1; // change this key every time you want force a refresh
for(var i=0;i<scripts.length;i++){ 
   for(var j=0;j<torefreshs;j++){ 
      if(scripts[i].src && (scripts[i].src.indexOf(torefreshs[j]) > -1)){
        new_src = scripts[i].src.replace(torefreshs[j],torefreshs[j] + 'k=' + key );
        scripts[i].src = new_src; // change src in order to refresh js
      } 
   }
}

이것을 사용해보십시오

 <script language="JavaScript" src="js/myscript.js"></script>

이에:

 <script language="JavaScript" src="js/myscript.js?n=1"></script>

다음은 최신 프로젝트에 사용하고있는 내용입니다.

컨트롤러에서 :

if ( IS_DEV ) {
    $this->view->cacheBust = microtime(true);
} else {
    $this->view->cacheBust = file_exists($versionFile) 
        // The version file exists, encode it
        ? urlencode( file_get_contents($versionFile) )
        // Use today's year and week number to still have caching and busting 
        : date("YW");
}

보기에서 :

<script type="text/javascript" src="/javascript/somefile.js?v=<?= $this->cacheBust; ?>"></script>
<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<?= $this->cacheBust; ?>">

우리의 게시 프로세스는 현재 빌드의 개정 번호를 가진 파일을 생성합니다. 이것은 파일을 URL 인코딩하고 캐시 버스터로 사용하여 작동합니다. 장애 조치 (failover)로서 해당 파일이 존재하지 않으면 연도와 주 번호가 사용되어 캐싱이 계속 작동하며 일주일에 한 번 이상 새로 고쳐집니다.

또한 이는 개발 환경에서 모든 페이지로드에 대해 캐시 버스 팅을 제공하므로 개발자는 모든 리소스 (javascript, css, ajax 호출 등)에 대한 캐시를 지우는 것에 대해 걱정할 필요가 없습니다.

또는 file_get_contets로 서버에서 js 파일을 읽은 다음 js 내용을 헤더에 에코로 넣을 수 있습니다

아마 "청소 캐시는" 쉽게 그것이 있어야로하지 않습니다. 브라우저에서 캐시를 지우는 대신 파일 을 "만지면" 실제로 서버에 캐시 된 소스 파일의 날짜가 변경되고 (Edge, Chrome 및 Firefox에서 테스트 됨) 대부분의 브라우저가 최신 최신 사본을 자동으로 다운로드 한다는 사실을 깨달았습니다 서버의 내용 (코드, 멀티미디어도 그래픽). 프로그램을 실행하기 전에 서버에서 최신 스크립트를 복사하고 "터치 작업" 솔루션을 제안 하기 때문에 모든 문제 파일의 날짜를 최신 날짜 및 시간으로 변경 한 다음 새로운 사본을 다운로드합니다. 브라우저로 :

<?php
    touch('/www/control/file1.js');
    touch('/www/control/file2.js');
    touch('/www/control/file2.js');
?>

... 나머지 프로그램 ...

이 문제를 해결하는 데 약간의 시간이 걸렸습니다 (많은 브라우저가 다른 명령과 다르게 작동하기 때문에 파일 시간을 확인하고 브라우저에서 다운로드 한 사본과 비교합니다 (날짜와 시간이 다른 경우 새로 고침을 수행 할 경우)). 가정 된 올바른 길을 갈 수 없으며 항상 유용하고 더 나은 해결책이 있습니다. 안부와 행복한 캠핑.

yboussard에서 제안한 코드에 문제가있었습니다. 내부 j 루프가 작동하지 않았습니다. 다음은 내가 성공적으로 사용하는 수정 된 코드입니다.

function reloadScripts(toRefreshList/* list of js to be refresh */, key /* change this key every time you want force a refresh */) {
    var scripts = document.getElementsByTagName('script');
    for(var i = 0; i < scripts.length; i++) {
        var aScript = scripts[i];
        for(var j = 0; j < toRefreshList.length; j++) {
            var toRefresh = toRefreshList[j];
            if(aScript.src && (aScript.src.indexOf(toRefresh) > -1)) {
                new_src = aScript.src.replace(toRefresh, toRefresh + '?k=' + key);
                // console.log('Force refresh on cached script files. From: ' + aScript.src + ' to ' + new_src)
                aScript.src = new_src;
            }
        }
    }
}

PHP를 사용하는 경우 다음을 수행 할 수 있습니다.

 <script src="js/myscript.js?rev=<?php echo time();?>"
    type="text/javascript"></script>

Cache.delete () 는 새로운 크롬, 파이어 폭스 및 오페라에 사용될 수 있습니다.

잘못된 정보를 제공하지 마십시오. 캐시 API 는 http 캐시 와 다른 유형의 캐시입니다.

서버가 올바른 헤더를 보내면 HTTP 캐시 가 시작 되며 javasvipt로 액세스 할 수 없습니다.

반면 캐시 API 는 원하는 경우 해고되며 서비스 작업자 와 작업 할 때 유용합니다 하므로 요청을 교차시키고 이러한 유형의 캐시에서 요청에 응답 할 수 있습니다. ilustration 1 ilustration 2 코스

이러한 기술을 사용하여 항상 사용자에게 최신 콘텐츠를 제공 할 수 있습니다.

1. location.reload (true)를 사용하십시오. 이 난을 권 해드립니다 않을 것이다, 그래서 나를 위해 작동하지 않습니다.
2. 캐시 API 사용 에 저장하고 요청과 교차 를 서비스 워커 . 서버가 새로 고치려는 파일 의 캐시 헤더 를 보낸 경우 브라우저는 먼저 HTTP 캐시에서 응답하므로 그것을 찾지 못하면 네트워크로 이동하여 오래된 파일로 끝날 수 있습니다
3. stactics 파일에서 URL을 변경하십시오. 내 추천은 파일 내용 변경으로 이름을 지정해야한다는 것입니다. MD5를 다음 문자열과 URL을 친절로 변환하고, MD5는, 파일의 내용이 변경됩니다 당신을 거기 충분히 오랫동안 HTTP 캐시 헤더를 보낼 수 있습니다

나는 세 번째 권 해드립니다 것이다 참조를

메타 HTML 태그를 사용하여 브라우저 캐싱을 비활성화하면 헤드 섹션에 html 태그 만 넣어 코딩 / 테스트 중에 웹 페이지가 캐시되지 않도록하고 메타 태그를 제거 할 수 있습니다.

(헤드 섹션에서)

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0"/>

이것을 머리에 붙여 넣은 후 페이지를 새로 고치면 새 자바 스크립트 코드도 새로 고쳐야합니다.

이 링크는 필요한 경우 다른 옵션을 제공합니다 http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

또는 당신은 그렇게 버튼을 만들 수 있습니다

<button type="button" onclick="location.reload(true)">Refresh</button>

새로 고쳐지고 캐싱을 피하지만 테스트를 마칠 때까지 페이지에 표시됩니다. 주먹 옵션이 가장 좋습니다.

나는 프레임 워크의 버전을 정한 다음 스크립트와 스타일 경로에 버전 번호를 적용하는 경향이 있습니다.

<cfset fw.version = '001' />
<script src="/scripts/#fw.version#/foo.js"/>

window.parent.caches.delete("call")

콘솔에서 코드를 실행 한 후 브라우저를 닫고 엽니 다.

window.location.reload(true)HTML5 표준에서 사용되지 않는 것 같습니다. 쿼리 문자열을 사용하지 않고이를 수행하는 한 가지 방법 은 표준화 된 것으로 보이는 Clear-Site-Data헤더 를 사용 하는 것 입니다.

브라우저 캐시와 동일한 링크가 발생하므로 URL의 임의의 숫자 끝에 추가해야합니다. new Date().getTime()다른 숫자를 생성하십시오.

new Date().getTime()전화처럼 링크 끝을 추가 하십시오.

'https://stackoverflow.com/questions.php?' + new Date().getTime()

산출: https://stackoverflow.com/questions.php?1571737901173