javascriptでキャッシュのクリア

https://okwave.jp/qa/q345977.html

 

JavaScriptを使って、画像のURLにランダムで無意味な文字列を加えればキャッシュされなくなる……と考えて、以下のように書いてみました。　

 

<html>
<head>
<script language=”JavaScript”>
<!– function img(url, width, height, alt) { url = url + ‘?anticache=’ + Math.random(); document.write(‘<img src=”‘ + url + ‘”‘); document.write(‘ width=”‘ + width + ‘”‘); document.write(‘ height=”‘ + height + ‘”‘); document.writeln(‘ alt=”‘ + alt + ‘”>’); } // –> </script>
</head>
<body> Reloadしてみて！
<script language=”JavaScript”> <!– img(‘http://www.canon.co.jp/Imaging/D60/SAMP/CRW_2011_JFR.jpg’, 2048, 1360, ‘キャッシュされない画像だよ’); // –> </script> <noscript> <img src=”http://www.canon.co.jp/Imaging/D60/SAMP/CRW_2011_JFR.jpg” width=”2048″ height=”1360″ alt=”キャッシュされる画像だよ”> </noscript> </body>
</html>

 

 

 

確かにキャッシュされなくなるみたいです。

これは、htmlのソースが（画像に関係しないところでも）変わっていれば、（htmlを）キャッシュから読み込まないと言うことなんですか？それとも、URLが違う画像は、（画像を）キャッシュから読み込まないということなんでしょうか？しくみを少し解説して頂けると助かります。また、ファイル名に無意味な文字列を加えていいのはなぜですか？ッシュから読み込まないということなんでしょうか？ 　

 

 

 

キャッシュから読み込まないということなんでしょうか？

そのとおりです。 　URLの「?」以降の部分は、付加情報（正しい名称は知らないです）をあらわします。たとえばこのページのURLでは「?q=345977」の部分です。 　CGIなどではこの付加情報を解釈して、たとえば「質問番号345977の内容を送信する」という動作をします。 　

しかし画像にどんな付加情報を付けても、サーバーには無視されます。ランダムで無意味な付加情報でも、単に無視されるだけです。 　

一方ブラウザの側では、付加情報の値が違えば違うURLだと律儀に解釈しますから、それぞれ別々にキャッシュされます。 　

上記のソースではJavaScriptが画像の付加情報をランダムに作ります。この値が偶然一致しない限り、ブラウザのキャッシュ内の画像は呼び出されません。サーバーに画像が再び要求されます。

 

https://okwave.jp/qa/q1820946.html

 

素朴なギモンなんですが、Java Script のキャッシュ制御とmetaタグのキャッシュ制御はどちらが優先されるのでしょう。ご存知の方がいらっしゃいましたらご回答頂けますでしょうか。

 

 

metaタグでの方法は http://www5e.biglobe.ne.jp/~access_r/hp/html/html_018.html JavaScriptでの方法は

<script type=”text/javascript”>
<!– var now=(new Date()).getTime(); document.write(‘<img src=”now.jpg?’+now+'”>’); –>
</script>

としますと、 metaタグのキャッシュ制御が有効ならおそらくキャッシュが物理的に残りません。 JavaScriptのキャッシュ制御とは多くの場合、既存のキャッシュを読み込まないようにするものです。 「metaタグでキャッシュが残らなければ、JavaScriptは無駄になる」が答えだと思います。 もっとも、metaタグが効かない場合もあるらしいのでJavaScriptでキャッシュが残らないようにするのも重要であることに代わりがありませんが。 実際、更新内容をリアルタイムで読み込んでほしいならばJavaScriptのみで制御したほうが指定部分以外はキャッシュから読み込むのでロードは早くなるかと。 （この場合、JavaScriptをoffにしていたら意味がなくなるのが問題ではありますが）

 

JavaScriptでキャッシュを操作する方法を現役エンジニアが解説【初心者向け】

 

HTMLファイル

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <title>sample</title>
</head>
<body>
  <div id="now"></div>
  <script src="sample.js?p=(new Date()).getTime()"></script>
</body>
</html>

 

JavaScriptファイル(sample.js)

var now = new Date();
document.getElementById("now").innerText = (now.getMonth() + 1) + "/" + (now.getDate());

 

実行結果は以下のようになります。htmlとjsのStatusが「200」となり、キャッシュを使用していないことが確認できます。