JavaScript에서 캐시 지우기

JavaScript에서 캐시 지우기

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

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

편집 주:이 질문은 다음 부분에서 반중복되어 있으며, 다음 질문 중 첫 번째 질문의 답변이 가장 좋을 수 있습니다.이 답변은 더 이상 이상적인 해결책이 아닙니다.

브라우저에서 캐시된 CSS/JS 파일을 강제로 새로고침하려면 어떻게 해야 합니까?

클라이언트에 JavaScript 파일을 강제로 새로 고치려면 어떻게 해야 합니까?

로컬 Javascript 소스/json 데이터를 동적으로 다시 로드합니다.

업데이트: 이 비표준 파라미터의 배경 파라미터는 location.reload()에 없습니다.또한 Firefox가 지원되는 유일한 최신 브라우저일 가능성이 있습니다.

---

window.location.reload(true)를 호출하여 현재 페이지를 새로고침할 수 있습니다.캐시된 항목은 모두 무시하고 서버에서 페이지, css, 이미지, JavaScript 등의 새로운 복사본을 가져옵니다.이렇게 하면 전체 캐시가 지워지는 것이 아니라 현재 페이지의 캐시가 지워지는 효과가 있습니다.

단, 패스 또는 파일명을 다양한 응답에 기재된 대로 버전화하는 것이 가장 좋은 방법입니다.또한 파일 이름 수정: 사용하지 않는 이유로 쿼리 문자열 사용 안 함을 참조하십시오.?v=n버전 관리 스킴으로 사용합니다.

Javascript로는 캐시를 지울 수 없습니다.일반적인 방법은 다음과 같이 리비전 번호 또는 마지막으로 갱신된 타임스탬프를 파일에 추가하는 것입니다.

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>

window.location.reload(true)HTML5 규격에 의해 폐지된 것 같습니다.쿼리 문자열을 사용하지 않고 이를 수행하는 한 가지 방법은 표준화된 것처럼 보이는 헤더를 사용하는 것입니다.

템플릿 끝에 다음 내용을 입력합니다.

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.length;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 로 인코딩 해, 캐시 버스터로서 사용하는 것으로 동작합니다.페일오버로 해당 파일이 존재하지 않는 경우 캐시가 계속 작동하도록 연도 및 주 번호가 사용되며 일주일에 한 번 이상 새로 고쳐집니다.

또한 개발 환경에서 모든 페이지 로드 시 캐시 버스트를 제공하여 개발자가 리소스(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');
?>

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

이 문제를 해결하는 데 시간이 걸렸습니다(많은 브라우저가 명령어에 따라 다르게 동작하지만, 모든 브라우저가 파일 시간을 체크하고 다운로드한 브라우저와 비교하기 때문에 날짜와 시간이 다르면 새로 고침이 이루어집니다). 만약 당신이 올바른 방법으로 할 수 없다면, 그것에 대한 다른 유용하고 더 나은 해결책이 항상 있습니다.잘 부탁드립니다.캠핑 잘 부탁드립니다.

나는 ybousard가 제시한 코드에 문제가 좀 있었다.내부 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>

잘못된 정보를 주지 마세요.캐시 api는 http 캐시와 다른 유형의 캐시입니다.

HTTP 캐시는 서버가 올바른 헤더를 보낼 때 실행되므로 javasvipt로 액세스할 수 없습니다.

한편 캐시 api는 필요할 때 실행되며 서비스 워커를 사용할 때 유용하기 때문에 이러한 유형의 캐시에서 요청을 교차하고 응답할 수 있습니다. 참조: ilustration 1 ilustration 2 course

이러한 테크닉을 사용하면, 항상 새로운 컨텐츠를 유저에게 제공할 수 있습니다.

1. location.reload(true)를 사용해 주세요.이 방법은 사용할 수 없기 때문에 추천하지 않습니다.
2. 캐시 api를 사용하여 캐시에 저장하고 서비스 워커와 요구를 교차시키십시오.서버가 새로고침할 파일의 캐시 헤더를 송신한 경우 브라우저는 먼저 HTTP 캐시에서 응답하고 찾지 못할 경우 네트워크에 접속하여 오래된 파일이 생성될 수 있습니다.e
3. stactics 파일에서 URL을 변경합니다.제가 추천하는 것은 파일 콘텐츠의 변경과 함께 이름을 붙이는 것입니다.md5를 사용하여 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"/>

이것을 머리에 붙여넣은 후 페이지를 새로 고치면 새로운 Javascript 코드도 새로 고쳐야 합니다.

이 링크는 필요한 경우 다른 옵션을 제공합니다.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"/>

Cache.delete()는 새로운 Chrome, Firefox 및 Opera에 사용할 수 있습니다.

나는 최근에 이 문제에 대한 해결책을 찾았다.저 같은 경우에는 javascript를 사용하여 html 요소를 업데이트하려고 했는데, GET 요청에서 가져온 데이터를 바탕으로 XHR을 사용하여 텍스트를 업데이트하고 있었습니다.XHR 요청은 자주 발생했지만 캐시된 HTML 데이터는 답답할 정도로 그대로였습니다.

에 캐시 했습니다.fetch는 XHR을.api fetch api XHR 。하다

        async function updateHTMLElement(t) {
            let res = await fetch(url, {cache: "no-store"});
            if(res.ok){
                let myTxt = await res.text();
                document.getElementById('myElement').innerHTML = myTxt;
            }
        }

「 」라는 점에 해 주세요.{cache: "no-store"}?? 새 됩니다.이로 인해 브라우저는 해당 요소의 캐시를 버스트하여 새 데이터가 올바르게 로드됩니다.★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★이것이 당신에게도 도움이 되길 바랍니다.

의 캐시를 것. 서버 측에서 갱신된 의 캐시는 그대로 됩니다.src 방법으로 Atribute, 즉 Atribute는 Atribute를 입니다.Date.now() 、 , 、 URL to to to , 。src속성을 지정합니다.이것은 이미지에 대해서는 신뢰성 있게 동작하지만 HTML 요소에는 동작하지 않습니다., 이 두방법 중 할 수 :- ) 、 [ ] 、 [ ] 、 [ ] 、 [ 。

대부분의 정답은 이미 이 항목에서 언급되어 있습니다.하지만 제가 읽을 수 있었던 기사 중 가장 좋은 것에 링크를 추가하고 싶습니다.

https://www.fastly.com/blog/clearing-cache-browser

가장 적합한 솔루션은 다음과 같습니다.

Iframe에 POST 합니다.다음은 제안된 게시물에서 약간 빼는 내용입니다.

=============

const ifr = document.createElement('iframe');
ifr.name = ifr.id = 'ifr_'+Date.now();
document.body.appendChild(ifr);
const form = document.createElement('form');
form.method = "POST";
form.target = ifr.name;
form.action = ‘/thing/stuck/in/cache’;
document.body.appendChild(form);
form.submit();

몇 가지 분명한 부작용이 있습니다.이것에 의해 브라우저 이력 엔트리가 작성되어 응답을 캐시하지 않는 것과 같은 문제가 발생합니다.그러나 이것은 fetch를 위해 존재하는 비행 전 요건을 벗어나며, 이것은 네비게이션이기 때문에 캐시를 분할하는 브라우저는 올바른 것을 클리어합니다.

이건 거의 맞췄어.파이어폭스는 크로스 오리진리소스에 대해서만 스택된 오브젝트를 유지합니다.모든 브라우저는 동일한 리소스 및 크로스 오리진 리소스 모두에 대해 개체의 탐색 캐시를 비활성화합니다.

==============================

여러 가지 시도를 했는데 그게 잘 되더라고요.유일한 문제는 이 스크립트를 최종 사용자 페이지로 가져와 캐시를 리셋할 수 있어야 한다는 것입니다.우리는 특별한 경우에 운이 좋았다.

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

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

브라우저 캐시가 같은 링크이므로 URL의 난수 끝을 추가해야 합니다. new Date().getTime()다른 번호를 생성합니다.

더하면 돼요.new Date().getTime()의 끝은 .

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

★★★★★https://stackoverflow.com/questions.php?1571737901173

이 문제는 ETAG를 사용하여 해결했습니다.

Etags는 지문과 비슷하며 지정된 URL의 리소스가 변경되면 새 Etag 값을 생성해야 합니다.이러한 항목을 비교하여 리소스의 두 표현이 동일한지 여부를 확인할 수 있습니다.

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

Cache.delete()

방법

구문:

cache.delete(request, {options}).then(function(found) {
  // your cache entry has been deleted if found
});

언급URL : https://stackoverflow.com/questions/1011605/clear-the-cache-in-javascript