Bagaimana cara mengosongkan cache browser secara terprogram?

121

Saya mencari cara untuk mengosongkan cache browser secara terprogram. Saya melakukan ini karena aplikasi menyimpan data rahasia dan saya ingin menghapusnya saat Anda menekan "log out". Ini akan terjadi baik melalui server atau JavaScript. Tentu saja, menggunakan perangkat lunak pada komputer asing / publik masih tidak disarankan karena ada lebih banyak bahaya seperti key logger yang tidak dapat Anda kalahkan pada tingkat perangkat lunak.

javascript  html  caching  browser 
— Menara
sumber
3
Browser yang mana? Anda juga harus melihat memberi tahu browser apa yang tidak boleh disimpan dalam cache dari server vs. mencoba menghapusnya.
— Perangkat Lunak Mech
Anda mungkin juga ingin melihat tutorial ini tentang Caching dan cara kerjanya. mnot.net/cache_docs mencakup header kontrol cache dan hal-hal seperti itu
— scrappedcola
@MechSoftware Saya ingin menyimpan cache untuk memuat halaman lebih cepat, tetapi saya ingin menghapusnya setelah log off. Lebih disukai dukungan browser sebaik mungkin.
— Menara
2
@rFactor Tidak ada yang akan menggunakan browser yang memberikan kontrol situs web atas cache-nya.
— NullUserException
3
Situs web de facto memiliki kendali atas cache, karena mereka mengontrol header HTTP.
— Danubian Sailor

Jawaban:

38

Mungkin saja, Anda cukup menggunakan jQuery untuk mengganti 'tag meta' yang mereferensikan status cache dengan tombol / pengendali peristiwa, lalu menyegarkan, mudah, 

$('.button').click(function() {
    $.ajax({
        url: "",
        context: document.body,
        success: function(s,x){

            $('html[manifest=saveappoffline.appcache]').attr('content', '');
                $(this).html(s);
        }
    }); 
});

CATATAN: Solusi ini bergantung pada Cache Aplikasi yang diterapkan sebagai bagian dari spesifikasi HTML 5. Ini juga membutuhkan konfigurasi server untuk menyiapkan manifes App Cache. Ini tidak menjelaskan metode yang dengannya seseorang dapat menghapus cache browser 'tradisional' melalui kode sisi klien atau server, yang hampir tidak mungkin dilakukan.

— Semangat Murapa
sumber
Apakah ini hanya fitur HTML5?
— John Naegle
Saya akan mengatakannya, dan saya percaya itu juga membutuhkan konfigurasi server (untuk menyiapkan manifes cache aplikasi). Meskipun jawaban ini menawarkan solusi untuk pertanyaan asli, ini mengaburkan fakta bahwa hampir tidak mungkin untuk menghapus cache browser tradisional melalui kode sisi klien atau server.
— Eric Fuller
Metode ini tampaknya melewati cache dan mengupdate konten, tetapi saat halaman dimuat ulang, ia kembali ke konten yang sebelumnya di-cache.
— sederhana
tidak digunakan lagi untuk mendukung pengembang
— nadav
2
pekerja layanan tidak bekerja di iPhone jadi Anda harus menggunakan cache aplikasi di sana
— tony
159

Tidak mungkin browser akan membiarkan Anda menghapus cache-nya. Ini akan menjadi masalah keamanan yang sangat besar jika itu memungkinkan. Ini bisa sangat mudah disalahgunakan - begitu browser mendukung "fitur" seperti itu adalah saat saya mencopot pemasangannya dari komputer saya.

Apa yang dapat Anda lakukan adalah memberitahukannya agar tidak menyimpan halaman Anda, dengan mengirimkan header yang sesuai atau menggunakan tag meta berikut:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

Anda mungkin juga ingin mempertimbangkan untuk menonaktifkan pelengkapan otomatis di bidang formulir, meskipun saya khawatir ada cara standar untuk melakukannya ( lihat pertanyaan ini ).

Terlepas dari itu, saya ingin menunjukkan bahwa jika Anda bekerja dengan data sensitif, Anda harus menggunakan SSL. Jika Anda tidak menggunakan SSL, siapa pun yang memiliki akses ke jaringan dapat mengendus lalu lintas jaringan dan dengan mudah melihat apa yang dilihat pengguna Anda.

Menggunakan SSL juga membuat beberapa browser tidak menggunakan caching kecuali secara eksplisit diperintahkan. Lihat pertanyaan ini .

— NullUserException
sumber
8
Mengapa saya harus menghapus cache aplikasi web saya untuk mengganggu pengguna saya? Saya ingin melakukannya untuk menghapus jejak data pribadi yang di-cache. Jika saya memberi tahu browser untuk tidak melakukan cache, browser harus meminta megabyte data sisi klien setiap kali halaman dimuat, yang tidak ingin saya lakukan.
— Menara
27
tidak ada yang mau, karena jelas itu tidak mungkin. Sama seperti Anda tidak dapat menjalankan skrip pada origin lain tidak berarti Anda tidak dapat menjalankan skrip pada origin Anda. Jika Anda tidak dapat menghapus cache pada sumber yang jauh, itu logis, tetapi mengapa saya tidak dapat menghapus cache dari sumber yang saya jalankan? Tidak ada alasan mengapa tidak melakukannya, jadi saya mencari apakah ada solusi untuk itu, tetapi sepertinya itu tidak mungkin. Jika Anda sangat penasaran, saya dapat memberi tahu Anda bahwa saya memiliki aplikasi besar dengan banyak CSS, HTML dan JS yang dikompilasi hingga sekitar 6 MB.
— Menara
4
@rFactor Itu terlalu banyak.
— NullUserException
14
Tolong jelaskan bagaimana pun implementasinya, ini akan menjadi masalah keamanan? Ini bisa diimplementasikan dengan aman.
— Dan
22
Mungkin saya tidak cukup tidur tadi malam, dengan cara apa ini menjadi masalah keamanan, ketika aplikasi web dapat menghapus ( tidak mengubah ) cache? Bagaimana Anda bisa memanfaatkan itu?
— Volker E.
19

menggunakan html itu sendiri. Ada satu trik yang bisa digunakan. Triknya adalah menambahkan parameter / string ke nama file di tag skrip dan mengubahnya saat Anda mengubah file.

<script src="myfile.js?version=1.0.0"></script>

Browser menafsirkan seluruh string sebagai jalur file meskipun apa yang muncul setelah "?" adalah parameter. Jadi apa yang terjadi sekarang adalah waktu berikutnya ketika Anda memperbarui file Anda, cukup ubah nomor di tag skrip di situs web Anda (Contoh <script src="myfile.js?version=1.0.1"></script>) dan setiap browser pengguna akan melihat file telah berubah dan mengambil salinan baru.

— Joish
sumber
1
bagi mereka yang menggunakan beberapa bahasa dinamis sisi server, jika Anda dapat mengakses file ctime, (atau mtime), Anda dapat menambahkan waktu tersebut di belakangnya. Misalnya di php, myfile.js?v=<?=filectime('myfile.js');?>dan di sana Anda mendapatkan cache pembaruan otomatis untuk sumber daya Anda.
— Pierre-Antoine Guillaume
Saya menggunakan teknik ini selama beberapa hari. Tapi saya perhatikan hari ini bahwa, file tersebut masih dirender dari cache bahkan setelah saya mengubah bagian versinya. Saya menggunakan Chrome. Itu ditampilkan bahkan setelah saya menghapus file dari server. Adakah yang punya info mengapa itu mungkin tidak berfungsi?
— Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ
— Nevin
9

Ide terbaik adalah membuat pembuatan file js dengan nama + beberapa hash dengan versi, jika Anda memang perlu menghapus cache, cukup buat file baru dengan hash baru, ini akan memicu browser untuk memuat file baru

— Admiral Duck
sumber
5

Awalnya saya mencoba berbagai pendekatan programatik di html saya, JS untuk membersihkan cache browser. Tidak ada yang berfungsi di Chrome terbaru.

Akhirnya, saya berakhir dengan .htaccess:

<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

Diuji di Chrome, Firefox, Opera

Referensi: https://wp-mix.com/disable-caching-htaccess/

— rajagopalx
sumber
4

location.reload (true); akan memuat ulang halaman saat ini dengan susah payah, mengabaikan cache.
Cache.delete () juga dapat digunakan untuk chrome, firefox, dan opera baru.

— Jay Shah
sumber
Fungsi ini tidak berfungsi dengan penjelajah Internet dan browser safari. Tidak yakin apakah berfungsi dengan Microsoft Edge.
— Pengembang Penasaran
3

Di Chrome, Anda dapat melakukan ini menggunakan ekstensi pembandingan. Anda perlu memulai chrome Anda dengan sakelar berikut:

./chrome --enable-benchmarking --enable-net-benchmarking

Di konsol Chrome sekarang Anda dapat melakukan hal berikut:

chrome.benchmarking.clearCache();
chrome.benchmarking.clearHostResolverCache();
chrome.benchmarking.clearPredictorCache();
chrome.benchmarking.closeConnections();

Seperti yang Anda ketahui dari perintah di atas, ini tidak hanya membersihkan cache browser, tetapi juga membersihkan cache DNS dan menutup koneksi jaringan. Ini bagus saat Anda melakukan pembandingan waktu buka halaman. Jelas Anda tidak perlu menggunakan semuanya jika tidak diperlukan (misalnya clearCache () sudah cukup jika Anda hanya perlu menghapus cache dan tidak peduli dengan cache dan koneksi DNS).

— kakhkAtion
sumber
2 

//The code below should be put in the "js" folder with the name "clear-browser-cache.js"

(function () {
    var process_scripts = false;
    var rep = /.*\?.*/,
    links = document.getElementsByTagName('link'),
    scripts = document.getElementsByTagName('script');
    var value = document.getElementsByName('clear-browser-cache');
    for (var i = 0; i < value.length; i++) {
        var val = value[i],
            outerHTML = val.outerHTML;
        var check = /.*value="true".*/;
        if (check.test(outerHTML)) {
            process_scripts = true;
        }
    }
    for (var i = 0; i < links.length; i++) {
        var link = links[i],
        href = link.href;
        if (rep.test(href)) {
            link.href = href + '&' + Date.now();
        }
        else {
            link.href = href + '?' + Date.now();
        }
    }
    if (process_scripts) {
        for (var i = 0; i < scripts.length; i++) {
            var script = scripts[i],
            src = script.src;
            if (src !== "") {
                if (rep.test(src)) {
                    script.src = src + '&' + Date.now();
                }
                else {
                    script.src = src + '?' + Date.now();
                }
            }
        }
    }
})();
At the end of the tah head, place the line at the code below

    < script name="clear-browser-cache" src='js/clear-browser-cache.js' value="true" >< /script >
Luaskan cuplikan

— haimirick
sumber
3
Tidak jelas bagaimana jawaban ini bekerja dan bagaimana itu lebih baik daripada banyak jawaban yang ada. Ini bisa sangat ditingkatkan dengan deskripsi pendekatan apa yang Anda ikuti serta dokumentasi pendukung yang menunjukkan mengapa itu akan berhasil
— Vlad274
Meskipun dihargai, ini tidak menghapus cache browser, tampaknya cache-bust link apa pun pada halaman yang diberikan hanya dengan menambahkan params.
— Dan Chase
1

Anda sekarang dapat menggunakan Cache.delete ()

Contoh:

let id = "your-cache-id";
// you can find the id by going to 
// application>storage>cache storage 
// (minus the page url at the end)
// in your chrome developer console 

caches.open(id)
.then(cache => cache.keys()
  .then(keys => {
    for (let key of keys) {
      cache.delete(key)
    }
  }));

Bekerja di Chrome 40+, Firefox 39+, Opera 27+, dan Edge.

— r.delic
sumber
0

Bayangkan .jsfile ditempatkan di/my-site/some/path/ui/js/myfile.js

Jadi biasanya tag skrip akan terlihat seperti:

<script src="/my-site/some/path/ui/js/myfile.js"></script>

Sekarang ubah itu menjadi:

<script src="/my-site/some/path/ui-1111111111/js/myfile.js"></script>

Sekarang tentu saja itu tidak akan berhasil. Untuk membuatnya bekerja, Anda perlu menambahkan satu atau beberapa baris ke .htaccess baris yang penting: (seluruh .htaccess di bagian bawah)

RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]

Jadi apa yang dilakukannya adalah, ini semacam menghapus 1111111111dari jalan dan menghubungkan ke jalan yang benar.

Jadi sekarang jika Anda melakukan perubahan, Anda hanya perlu mengubah angkanya 1111111111menjadi nomor apa pun yang Anda inginkan. Dan bagaimanapun Anda memasukkan file Anda, Anda dapat mengatur nomor itu melalui stempel waktu ketika file js terakhir diubah. Jadi cache akan bekerja normal jika jumlahnya tidak berubah. Jika berubah, itu akan menyajikan file baru (YA SELALU) karena browser mendapatkan URL baru yang lengkap dan hanya percaya bahwa file tersebut sangat baru sehingga dia harus mendapatkannya.

Anda dapat menggunakan ini untuk CSS, faviconsdan apa pun yang disimpan dalam cache. Untuk CSS gunakan saja seperti itu

<link href="http://my-domain.com/my-site/some/path/ui-1492513798/css/page.css" type="text/css" rel="stylesheet">

Dan itu akan berhasil! Sederhana untuk diperbarui, mudah dirawat.

.Htaccess penuh yang dijanjikan

Jika Anda belum memiliki .htaccess, ini adalah jumlah minimum yang Anda butuhkan:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
</IfModule>
— caramba
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.