Bersihkan cache dalam JavaScript

Bagaimana cara menghapus cache browser dengan JavaScript?

Kami menyebarkan kode JavaScript terbaru tetapi kami tidak dapat memperoleh kode JavaScript terbaru.

Catatan Editorial: Pertanyaan ini semi-duplikat di tempat-tempat berikut, dan jawaban di pertanyaan pertama dari berikut mungkin adalah yang terbaik. Jawaban yang diterima ini bukan lagi solusi ideal.

Bagaimana cara memaksa browser untuk memuat ulang file CSS / JS yang di-cache?

Bagaimana saya bisa memaksa klien untuk me-refresh file JavaScript?

Reload secara dinamis data Javascript sumber / json lokal

Anda dapat memanggil window.location.reload (true) untuk memuat ulang halaman saat ini. Ini akan mengabaikan item yang di-cache dan mengambil salinan baru halaman, css, gambar, JavaScript, dll dari server. Ini tidak menghapus seluruh cache, tetapi memiliki efek membersihkan cache untuk halaman yang Anda buka.

Namun, strategi terbaik Anda adalah versi jalan atau nama file seperti yang disebutkan dalam berbagai jawaban lainnya. Selain itu, lihat Revving Filenames: jangan gunakan querystring karena alasan tidak digunakan ?v=nsebagai skema versi Anda.

Anda tidak dapat menghapus cache dengan javascript. Cara yang umum adalah menambahkan nomor revisi atau cap waktu terakhir ke file, seperti ini:

myscript.123.js

atau

myscript.js?updated=1234567890

Coba ubah src file JavaScript? Dari ini:

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

Untuk ini:

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

Metode ini harus memaksa browser Anda untuk memuat salinan baru file JS.

Selain caching setiap jam, atau setiap minggu, Anda dapat melakukan cache sesuai dengan data file.

Contoh (dalam PHP):

<script src="js/my_script.js?v=<?=md5_file('js/my_script.js')?>"></script>

atau bahkan menggunakan waktu modifikasi file:

<script src="js/my_script.js?v=<?=filemtime('js/my_script.js')?>"></script>

Anda juga dapat memaksa kode untuk dimuat ulang setiap jam, seperti ini, di PHP:

<?php
echo '<script language="JavaScript" src="js/myscript.js?token='.date('YmdH').'">';
?>

atau

<script type="text/javascript" src="js/myscript.js?v=<?php echo date('YmdHis'); ?>"></script>

letakkan ini di akhir templat Anda:

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

coba gunakan ini

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

Untuk ini:

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

Berikut cuplikan dari apa yang saya gunakan untuk proyek terbaru saya.

Dari pengontrol:

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");
}

Dari tampilan:

<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; ?>">

Proses penerbitan kami menghasilkan file dengan nomor revisi dari bangunan saat ini. Ini berfungsi dengan URL yang menyandikan file itu dan menggunakannya sebagai cache buster. Sebagai kegagalan, jika file itu tidak ada, nomor tahun dan minggu digunakan agar cache masih berfungsi, dan itu akan di-refresh setidaknya seminggu sekali.

Juga, ini menyediakan penghilang cache untuk setiap pemuatan halaman saat berada dalam lingkungan pengembangan sehingga pengembang tidak perlu khawatir dengan membersihkan cache untuk sumber daya apa pun (javascript, css, panggilan ajax, dll).

atau Anda bisa membaca file js oleh server dengan file_get_contets dan kemudian memasukkan gema di header isi js

Mungkin "membersihkan cache" tidak semudah yang seharusnya. Alih-alih membersihkan cache pada browser saya, saya menyadari bahwa "menyentuh" file tersebut sebenarnya akan mengubah tanggal file sumber di-cache di server (Diuji pada Edge, Chrome dan Firefox) dan sebagian besar browser secara otomatis akan mengunduh salinan terbaru dari apa yang ada di server Anda (kode, grafik juga multimedia apa pun). Saya sarankan Anda hanya menyalin skrip terkini di server dan solusi "melakukan hal sentuh" sebelum program Anda berjalan, sehingga itu akan mengubah tanggal semua file masalah Anda ke tanggal dan waktu terbaru, kemudian mengunduh salinan baru ke browser Anda:

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

... sisa program Anda ...

Butuh beberapa waktu untuk menyelesaikan masalah ini (karena banyak browser bertindak berbeda untuk perintah yang berbeda, tetapi mereka semua memeriksa waktu file dan membandingkannya dengan salinan yang Anda unduh di browser Anda, jika tanggal dan waktu yang berbeda, akan melakukan penyegaran), Jika Anda tidak bisa berjalan dengan cara yang benar, selalu ada solusi lain yang dapat digunakan dan lebih baik untuk itu. Salam hangat dan selamat berkemah.

Saya punya beberapa masalah dengan kode yang disarankan oleh yboussard. Loop dalam tidak bekerja. Berikut adalah kode yang dimodifikasi yang saya gunakan dengan sukses.

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;
            }
        }
    }
}

Jika Anda menggunakan php dapat melakukan:

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

Cache.delete () dapat digunakan untuk chrome, firefox dan opera baru.

Tolong jangan memberikan informasi yang salah. Cache api adalah jenis cache yang berbeda dari cache http

Tembolok HTTP dipecat ketika server mengirim tajuk yang benar , Anda tidak dapat mengakses dengan javasvipt.

Cache api di sisi lain ditembakkan saat Anda inginkan, ini berguna saat bekerja dengan pekerja layanan sehingga Anda dapat memotong permintaan dan menjawabnya dari jenis cache ini, lihat: ilustrasi 1 ilustrasi 2 saja

Anda bisa menggunakan teknik ini untuk selalu memiliki konten baru pada pengguna Anda:

1. Gunakan location.reload (true) ini tidak berfungsi untuk saya, jadi saya tidak akan merekomendasikannya.
2. Gunakan Cache api untuk menyimpan ke dalam cache dan memotong permintaan dengan pekerja layanan , berhati-hatilah dengan ini karena jika server telah mengirim header cache untuk file yang ingin Anda refresh, browser akan menjawab dari cache HTTP terlebih dahulu, dan jika tidak menemukannya, maka itu akan pergi ke jaringan, sehingga Anda bisa berakhir dengan file yang lama
3. Ubah url dari Anda file stactics, rekomendasi saya adalah Anda harus memberi nama dengan perubahan konten file Anda, saya menggunakan md5 dan kemudian mengubahnya menjadi string dan url friendly, dan md5 akan berubah dengan isi file, di sana Anda dapat dengan bebas mengirim header cache HTTP cukup lama

Saya akan merekomendasikan yang ketiga lihat

Anda juga dapat menonaktifkan caching peramban dengan tag meta HTML, cukup taruh tag html di bagian kepala untuk menghindari halaman web di-cache saat Anda melakukan pengkodean / pengujian dan ketika Anda selesai, Anda dapat menghapus meta tag.

(di bagian kepala)

<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"/>

Refresh halaman Anda setelah menempelkan ini di kepala dan harus menyegarkan kode javascript baru juga.

Tautan ini akan memberi Anda opsi lain jika Anda memerlukannya http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

atau Anda bisa membuat tombol seperti itu

<button type="button" onclick="location.reload(true)">Refresh</button>

itu menyegarkan dan menghindari caching tetapi itu akan ada di halaman Anda sampai Anda menyelesaikan pengujian, maka Anda bisa melepasnya. Opsi kepalan adalah yang terbaik.

Saya cenderung untuk versi kerangka kerja saya kemudian menerapkan nomor versi ke jalur skrip dan gaya

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

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

tutup dan buka browser setelah menjalankan kode di konsol.

window.location.reload(true)tampaknya telah ditinggalkan oleh standar HTML5. Salah satu cara untuk melakukan ini tanpa menggunakan string kueri adalah dengan menggunakan Clear-Site-Dataheader , yang tampaknya menjadi standar .

Karena cache browser tautan yang sama, Anda harus menambahkan nomor acak ujung url. new Date().getTime()menghasilkan angka yang berbeda.

Cukup tambahkan new Date().getTime()ujung tautan seperti panggilan

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

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