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

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

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

編集者注記：この質問は次の場所で半重複しています。次の質問の最初の回答がおそらく最良です。この受け入れられた答えは、もはや理想的なソリューションではありません。

ブラウザにキャッシュされたCSS / JSファイルを強制的に再読み込みさせる方法は？

クライアントにJavaScriptファイルの更新を強制するにはどうすればよいですか？

ローカルJavascriptソース/ jsonデータを動的に再読み込み

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ファイルの新しいコピーを強制的にロードする必要があります。

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>

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>

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

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

また、これにより、開発環境でのすべてのページの読み込みに対してキャッシュの無効化が提供されるため、開発者はリソース（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（）は、新しいchrome、firefox、operaで使用できます。

間違った情報を入力しないでください。 キャッシュAPIは、HTTPキャッシュとは異なるタイプのキャッシュです

サーバーが正しいヘッダーを送信すると、HTTPキャッシュが起動します。javasviptを使用してアクセスすることはできません。

キャッシュAPIしたいとき、一方では発射されるで作業する場合、それは便利ですサービスワーカーあなたが要求を交差し、このタイプのキャッシュ見るからそれに答えることができるように：Ilustrationによって1 Ilustrationによって2 コース

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

1. location.reload（true）を使用してください。これは私には機能しないので、お勧めしません。
2. キャッシュAPIを使用してキャッシュに保存し、リクエストをService Workerと交差させます。サーバーが更新するファイルのキャッシュヘッダーを送信した場合、ブラウザーは最初にHTTPキャッシュから応答するため、このAPIには注意してください。それが見つからない場合は、ネットワークに移動するので、古いファイルになってしまう可能性があります
3. 戦術ファイルからURLを変更します。私の推奨は、ファイルのコンテンツの変更に応じて名前を付ける必要があります。私はmd5を使用し、それを文字列およびURLフレンドリーに変換します。md5はファイルのコンテンツに応じて変更されます。 HTTPキャッシュヘッダーを十分な長さで自由に送信できる

私は3番目のものを見ることをお勧めします

メタHTMLタグを使用してブラウザのキャッシュを無効にすることもできます。コーディング/テスト中に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>

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

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

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

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

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

window.location.reload(true)HTML5標準では非推奨になっているようです。クエリ文字列を使用せずにこれを行う1つの方法は、標準化されているように見えるClear-Site-Dataヘッダーを使用することです。

ブラウザーに同じリンクをキャッシュさせるには、URLの最後に乱数を追加する必要があります。 new Date().getTime()別の番号を生成します。

new Date().getTime()呼び出しのようにリンクの終わりを追加するだけです

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

出力： https://stackoverflow.com/questions.php?1571737901173