javascriptに限らずですが、キャッシュのせいでうまく作動しないことってあるのでその対策の記録として。
例えば、画像をアップロードすると、apiへ送信してurlを発行し、画面に埋め込んでアップロード画像を表示するとする。
その後、再度送信して画像を変更すると仮定し、変更した際の画像のurlが同じだった場合、キャッシュの影響で最初に投稿した画像が表示されてしまうので、うまいこと対策を考えたいと思う
読み込みのurlが完全一致しなければキャッシュは発動しない
例えば、最初に画像をアップロードした際のurlが、http://〇〇/aa.jpg だったとして、その後に再度画像を変更した際でも同じurlだった場合、キャッシュが作動して後にアップロードした画像が表示されず、最初にアップロードした画像が表示されてしまう。
なので、同じurlを使ってしまう場合には、urlを同一にさせないようにしないといけない。その場合はパラメータを使うのが便利で、http://〇〇/aa.jpg?time=12345 などで埋め込むようにしておくと、あとでアップロードした画像が表示される。
例えば、webを作っている途中で、cssを変更した場合、キャッシュのせいで適用されなかったりするが、以下のような方法でcssを読み込ませるとすぐに反映される
///現在時刻を秒で
$param=date("YmdHis");
echo '<link rel="stylesheet" type="text/css" href="https://cookfan.net/css/cookfan.css?time='.$param.'" />'
同様に、javascript側でも日付のクラスからパラメータを作成して、付与してみる
var date_class=new Date();
var tmp_param=String(date_class.getHours())+String(date_class.getMinutes())+String(date_class.getSeconds());
var url='http://hoge.com/aa.jpg?time='+tmp_param;こんな感じでjavascript側であらかじめパラメータをつけてから、画面に返すとキャッシュが作動できず、即座に反映ができて便利でした。
ここで日付を使ったのは、秒単位でパラメータが変わるので、楽だったからです。
