Bagaimana untuk mengosongkan cache menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk mengosongkan cache menggunakan JavaScript?

WBOY

Lepaskan： 2023-08-27 11:29:02

ke hadapan

1899 orang telah melayarinya

如何使用 JavaScript 清除缓存？

Cache, biasanya dikenali sebagai cache, ialah sistem memori yang berbeza dalam komputer yang menyimpan data dan arahan yang kerap digunakan untuk tempoh masa yang singkat. Semasa memuatkan tapak web, penyemak imbas yang kami gunakan menyimpan secara automatik beberapa sumber, seperti imej, skrip dan helaian gaya, supaya ia boleh digunakan semula apabila halaman dimuat semula. Ini bukan sahaja memendekkan masa yang diperlukan untuk tapak web anda dimuatkan, ia juga membantu mengurangkan jumlah data yang perlu dihantar melalui rangkaian. Tetapi jenis cache yang disimpan oleh penyemak imbas ini juga mempunyai beberapa kelemahan. Masalah boleh berlaku jika sumber cache sudah lapuk atau jika penyemak imbas tidak dapat memuatkan semula halaman kerana ia menggunakan sumber cache. Untuk melakukan ini kadangkala kita perlu mengosongkan cache ini.

Pengguna boleh menggunakan JavaScript untuk mengosongkan cache penyemak imbas jika perlu. Ini diterangkan di bawah -

location.reload() - Salah satu kaedah berkesan yang boleh digunakan untuk memuat semula halaman semasa dan melumpuhkan caching. Pengguna mesti memberikan nilai boolean sebagai parameter dan nilai itu hendaklah ditetapkan kepada benar. Daripada menggunakan versi cache, teknik ini memaksa penyemak imbas untuk memuat semula semua sumber daripada pelayan.
kaedah navigator.serviceWorker.getRegistration() - Ini adalah alternatif untuk menjalankan kaedah nyahdaftar bagi setiap pendaftaran selepas mendapatkan semula semua pendaftaran Service Worker menggunakan kaedah getRegistrations() objek navigator.serviceWorker. Penyemak imbas kemudiannya akan memadam cache HTTPnya.
caches.open() dan cache.delete() - Kaedah ini menggunakan API Cache untuk membuka cache bernama dan kemudian memadamkan sumber tertentu daripada cache menggunakan kaedah delete()
localStorage.clear() dan sessionStorage.clear()- Untuk mengalih keluar semua pasangan nilai kunci daripada objek localStorage, pengguna boleh menggunakan kaedah localStorage.clear(). Fungsi sessionStorage.clear() boleh memadam semua pasangan nilai kunci daripada objek sessionStorage.

Gunakan kaedah location.reload()

Apabila parameter boolean ditetapkan kepada benar, kaedah location.reload() tidak akan cache halaman semasa, tetapi akan memuatkannya semula. Jika anda menentukan benar sebagai parameter, penyemak imbas akan memuat turun semua sumber (termasuk imej dan skrip) terus daripada pelayan dan bukannya menggunakan salinan cache.

Tatabahasa

location.reload(true);

Salin selepas log masuk

Dalam sintaks di atas, lokasi ialah objek global JavaScript dan membebankan kaedah lokasi.

Contoh

Dalam contoh ini, kami menggunakan kaedah location.reload() untuk mengosongkan memori cache melalui JavaScript. Kami menggunakan butang "kosongkan cache" dan mengaitkannya dengan acara klik. Pengendali acara klik melaksanakan kaedah location.reload() dengan parameter true. Setiap kali pengguna mengklik butang, JavaScript memaksa pelayar untuk memuat semula halaman web tanpa fail cache.

<html>
<body>
   <h2>Clearing <i> cache memory </i> using JavaScript</h2>
   <div>
      <img
      id = "myImage"
      style = "height: 200px"
      src ="https://www.tutorialspoint.com/javascript/images/javascript.jpg"/>
   </div>
   <button onclick = "clearCache()">Clear cache</button>
   <div id = "root" style="padding: 10px; background: #bdf0b8"></div>
   <script>
      let root = document.getElementById('root')
      function clearCache() {
         root.innerHTML += 'Cache cleared using location.reload(true)'
         windows.location.reload(true)
      }
   </script>
</body>
</html>

Salin selepas log masuk

Halaman web memaparkan mesej ini dan memuatkan semula fail terkini dengan pantas.

Gunakan kaedah navigator.serviceWorker.getRegistrations()

Dalam JavaScript, kaedah navigator.serviceWorker.getRegistration() ialah cara kedua pengguna boleh mengosongkan memori cache dengan menyahdaftar semua pendaftaran urutan pekerja perkhidmatan, dan kaedah navigator.serviceWorker.getRegistration( ) boleh digunakan untuk mengosongkan menyemak imbas cache HTTP Pelayan. Satu jenis Pekerja Web dipanggil Pekerja Perkhidmatan dan digunakan untuk melaksanakan sejumlah besar proses di latar belakang, seperti sumber caching. Penyemak imbas mesti mengosongkan cache HTTPnya dengan menyahaktifkan semua pendaftaran pekerja perkhidmatan.

Tatabahasa

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.getRegistrations()
   .then(function(registrations) {
      for(let registration of registrations) {
         registration.unregister();
      }
   });
}

Salin selepas log masuk

Dalam sintaks di atas, kami menyemak sama ada "serviceWorker" tersedia dalam objek navigator. Kami kemudiannya menyahdaftarkan Pekerja Perkhidmatan menggunakan kaedah navigator.serviceWorker.getRegistrations() dan registration.unregister().

Contoh

Dalam contoh ini, kami mengosongkan cache dengan menyahdaftar Service Worker menggunakan JavaScript. Kami menggunakan butang "kosongkan cache" dan mengaitkannya dengan acara klik. Pengendali acara klik melaksanakan fungsi yang menyahdaftarkan Pekerja Perkhidmatan. Kaedah navigator.serviceWorker.getRegistrations() dan registration.unregister() digunakan untuk menyahdaftarkan Pekerja Perkhidmatan. Selepas log keluar, kami memaparkan mesej pada halaman web.

<html>
<body>
   <h2>Clearing <i>cache memory</i> using JavaScript</h2>
   <div>
      <img id = "myImage" style = "height: 100px" src ="https://www.tutorialspoint.com/images/logo.png" />
   </div>
   <button onclick = "clearCache()">Clear cache</button>
   <div id = "root" style = "padding: 10px; background: #b8f0ea"></div>
   <script>
      let root = document.getElementById('root')
      function clearCache() {
         root.innerHTML = 'Cache cleared using navigator.serviceWorker.getRegistrations()'
         if ('serviceWorker' in navigator) {
            navigator.serviceWorker
            .getRegistrations()
            .then(function (registrations) {
               for (let registration of registrations) {
                  registration.unregister()
               }
            })
         }
      }
   </script>
</body>
</html>

Salin selepas log masuk

Mengosongkan cache ialah amalan terbaik, tetapi kadangkala ia boleh menjejaskan prestasi halaman web kerana semua fail mesti diambil semula. JavaScript mempunyai keupayaan untuk mengosongkan cache, yang boleh digunakan mengikut keperluan.

Atas ialah kandungan terperinci Bagaimana untuk mengosongkan cache menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!