web-dev-qa-db-ja.com

JavaScriptでキャッシュをクリアする

JavaScriptでブラウザのキャッシュをクリアするにはどうすればいいですか？

最新のJavaScriptコードをデプロイしましたが、最新のJavaScriptコードを入手できません。

編集者注記：この質問は次の場所に半重複しています。次の質問のうち最初の質問の答えがおそらく最善です。この受け入れられた答えはもはや理想的な解決策ではありません。

ブラウザにキャッシュされたCSS/JSファイルを強制的にリロードさせるにはどうすればいいですか？

どうすればクライアントにJavaScriptファイルを更新させることができますか？

動的にローカルのJavascriptソース/ JSONデータをリロード

javascriptcaching
162
subramani

現在のページをリロードするには、 window.location.reload（true） を呼び出します。キャッシュされたアイテムは無視され、サーバーからページ、CSS、画像、JavaScriptなどの新しいコピーが取得されます。これはキャッシュ全体をクリアするわけではありませんが、自分がいるページのキャッシュをクリアする効果があります。

ただし、他のさまざまな回答で説明されているように、パスまたはファイル名をバージョン管理することが最善の策です。さらに、バージョン管理スキームとして?v=nを使用しない理由については、 ファイル名の回転：クエリ文字列を使用しないでください を参照してください。

185
Kevin Hakanson

あなたはjavascriptでキャッシュをクリアすることはできません。一般的な方法は、次のようにリビジョン番号または最後に更新されたタイムスタンプをファイルに追加することです。

myscript.123.js

または

myscript.js?updated=1234567890

105
Greg

JavaScriptファイルのsrcを変更してみてください。これから：

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

これに：

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

このメソッドはブラウザにJSファイルの新しいコピーをロードさせるはずです。

37
Barry Gallagher

1時間ごと、または1週間ごとのキャッシュ以外に、ファイルデータに従ってキャッシュすることもできます。

例（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>
18
Alexandre T.

PHPのように、コードを1時間ごとに強制的に再ロードすることもできます。

<?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>
10
Fabien Ménager

これを使ってみてください

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

これに：

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

これをテンプレートの最後に置きます。

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
      } 
   }
}
6
yboussard

これが私が私の最新プロジェクトに使っているものの断片です。

コントローラから：

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エンコードし、それをキャッシュバスターとして使用することによって機能します。フェイルオーバーとして、そのファイルが存在しない場合は、年と週の番号が使用されるため、キャッシュは引き続き機能し、少なくとも週に1回は更新されます。

また、これは開発環境にある間、すべてのページロードに対してキャッシュ破壊を提供するので、開発者はあらゆるリソース（javascript、css、ajax呼び出しなど）のためにキャッシュをクリアすることを心配する必要はありません。

5
Justin Johnson

または、file_get_contetsを使用してサーバーごとにjsファイルを読み取り、そのヘッダーにjsの内容を反映させることもできます。

5
albanx

あなたがPHPを使用している場合は行うことができます：

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

私は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;
            }
        }
    }
}
3
Bryan

たぶん"キャッシュをクリアする"それほど簡単ではありません。ブラウザのキャッシュをクリアする代わりに、"touch"ファイルがサーバーにキャッシュされているソースファイルの日付を実際に変更し（Edge、Chrome、Firefoxでテスト済み）、ほとんどのブラウザは自動的に変更されます。あなたのサーバーに最新の最新コピーをダウンロードしてください（コード、グラフィック、マルチメディアも含む）。プログラムを実行する前に、最新のスクリプトをサーバーにコピーし、"タッチを行う"解決策をコピーするだけでよいのです。そうすれば、問題のあるファイルすべての日付が最新の日時に変更されます。その後、ブラウザに新しいコピーをダウンロードします。

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

...あなたのプログラムの残りの部分...

この問題を解決するには少し時間がかかりました（多くのブラウザはコマンドごとに動作が異なりますが、ファイルの時間を確認し、ブラウザでダウンロードしたコピーと比較すると、日付と時刻が異なる場合は更新されます）。想定された正しい方向に進むことはできません、それに常に有用で優れた解決策があります。よろしくと幸せなキャンプ。

3
Luis H Cabrejo

私は自分のフレームワークをバージョン管理してからスクリプトとスタイルパスにバージョン番号を適用する傾向があります。

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

誤った情報を入力しないでください。 Cache api とは異なる種類のキャッシュです http cache

HTTP cache はサーバが正しい headers を送信したときに発生します。javasviptでアクセスすることはできません。

Cache api あなたが望むときは解雇されます、 service worker で作業するときに便利です。リクエストを交差させてこのタイプのキャッシュから答えることができます： - 小話1小話2講座

ユーザーに常に新鮮なコンテンツを提供するために、これらのテクニックを使用することができます。

  1. location.reload（true） を使ってください。これは私にはうまくいきませんので、お勧めしません。
  2. キャッシュに保存してリクエストを service worker と交差させるには、 Cache api を使用します。サーバーが cacheヘッダーを送信した場合はこれに注意してください 更新したいファイルの場合、ブラウザは最初にHTTPキャッシュから応答し、見つからなかった場合はネットワークにアクセスするため、古いファイルになる可能性があります。
  3. あなたの静的ファイルからURLを変更してください、私のお勧めはあなたのファイルの内容の変更でそれに名前を付けるべきです、私は md5 を使用し、それから文字列とURLフレンドリーに変換しファイルの内容、そこにあなたは自由に十分な長さのHTTPキャッシュヘッダを送ることができます

私は3番目のものをお勧めします 参照

1
John Balvin Arias
window.parent.caches.delete("call")

コンソールでコードを実行したら、ブラウザを閉じて開きます。

1
Apoorv

Cache.delete（） は、新しいクロム、Firefox、およびオペラに使用できます。

1
Jay Shah

コーディング/テスト中にWebページがキャッシュされないようにメタ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>

それは更新されてキャッシュを回避しますが、テストが終了するまでページに表示されたままになります。その後、削除することができます。拳オプションが一番いいのです。

0
alfmonc