Wie lösche ich den Cache mit JavaScript?-js-Tutorial-php.cn

Wie lösche ich den Cache mit JavaScript?

WBOY

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

nach vorne

2020 Leute haben es durchsucht

如何使用 JavaScript 清除缓存？

Cache, allgemein bekannt als Cache, ist ein anderes Speichersystem in einem Computer, das häufig verwendete Daten und Anweisungen für einen kurzen Zeitraum speichert. Beim Laden einer Website speichern die von uns verwendeten Browser automatisch einige Ressourcen wie Bilder, Skripte und Stylesheets zwischen, damit sie beim erneuten Laden der Seite wieder verwendet werden können. Dies verkürzt nicht nur die Ladezeit Ihrer Website, sondern trägt auch dazu bei, die Datenmenge zu reduzieren, die über das Netzwerk gesendet werden muss. Allerdings hat diese Art des vom Browser gespeicherten Caches auch einige Nachteile. Probleme können auftreten, wenn zwischengespeicherte Ressourcen veraltet sind oder wenn der Browser die Seite nicht neu laden kann, weil er zwischengespeicherte Ressourcen verwendet. Dazu müssen wir manchmal diese Caches leeren.

Benutzer können bei Bedarf JavaScript verwenden, um den Cache des Browsers zu leeren. Diese werden im Folgenden beschrieben -

location.reload()-Methode – Eine der effektivsten Methoden, mit der die aktuelle Seite neu geladen und das Caching deaktiviert werden kann. Der Benutzer muss einen booleschen Wert als Parameter angeben und der Wert sollte auf true gesetzt sein. Anstatt zwischengespeicherte Versionen zu verwenden, zwingt diese Technik den Browser, alle Ressourcen vom Server neu zu laden.
navigator.serviceWorker.getRegistrations()-Methode – Dies ist eine Alternative zum Ausführen der Unregister-Methode für jede Registrierung, nachdem alle Service Worker-Registrierungen mithilfe der getRegistrations()-Methode des navigator.serviceWorker-Objekts abgerufen wurden. Der Browser löscht dann seinen HTTP-Cache.
Methoden „caches.open()“ und „cache.delete()“ – Diese Methode verwendet die Cache-API, um einen benannten Cache zu öffnen und löscht dann eine bestimmte Ressource aus dem Cache mithilfe der Methode „delete()“
Methoden „localStorage.clear()“ und „sessionStorage.clear()“ – Um alle Schlüssel-Wert-Paare aus dem localStorage-Objekt zu entfernen, können Benutzer die Methode „localStorage.clear()“ verwenden. Die Funktion sessionStorage.clear() kann alle Schlüssel-Wert-Paare aus dem sessionStorage-Objekt löschen.

Verwenden Sie die Methode location.reload()

Wenn der boolesche Parameter auf true gesetzt ist, speichert die Methode location.reload() die aktuelle Seite nicht zwischen, sondern lädt sie neu. Wenn Sie true als Parameter angeben, lädt der Browser alle Ressourcen (einschließlich Bilder und Skripte) direkt vom Server herunter, anstatt zwischengespeicherte Kopien zu verwenden.

Grammatik

location.reload(true);

Nach dem Login kopieren

In der obigen Syntax ist location das globale Objekt von JavaScript und überlädt die location-Methode.

Beispiel

In diesem Beispiel verwenden wir die Methode location.reload() , um den Cache-Speicher über JavaScript zu löschen. Wir haben die Schaltfläche „Cache leeren“ verwendet und sie mit einem Klickereignis verknüpft. Der Click-Event-Handler führt die Methode location.reload() mit dem Parameter true aus. Immer wenn der Benutzer auf die Schaltfläche klickt, zwingt das JavaScript den Browser, die Webseite ohne die zwischengespeicherte Datei neu zu laden.

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

Nach dem Login kopieren

Die Webseite zeigt diese Meldung an und lädt schnell die neuesten Dateien neu.

Verwenden Sie die Methode navigator.serviceWorker.getRegistrations()

In JavaScript ist die Methode navigator.serviceWorker.getRegistrations() die zweite Möglichkeit, mit der Benutzer den Cache-Speicher leeren können, indem sie die Registrierung aller Service-Worker-Thread-Registrierungen aufheben, und die Methode navigator.serviceWorker.getRegistrations() kann zum Löschen verwendet werden Durchsuchen des HTTP-Cache des Servers. Eine Art von Web Worker wird als Service Worker bezeichnet und wird verwendet, um eine große Anzahl von Prozessen im Hintergrund auszuführen, beispielsweise das Zwischenspeichern von Ressourcen. Der Browser muss seinen HTTP-Cache leeren, indem er alle Service-Worker-Registrierungen deaktiviert.

Grammatik

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

Nach dem Login kopieren

In der obigen Syntax prüfen wir, ob „serviceWorker“ im Navigatorobjekt verfügbar ist. Anschließend heben wir die Registrierung des Service Workers mit den Methoden navigator.serviceWorker.getRegistrations() und registration.unregister() auf.

Beispiel

In diesem Beispiel leeren wir den Cache, indem wir den Service Worker mithilfe von JavaScript abmelden. Wir haben die Schaltfläche „Cache leeren“ verwendet und sie mit einem Klickereignis verknüpft. Der Click-Event-Handler führt eine Funktion aus, die die Registrierung des Service Workers aufhebt. Die Methoden navigator.serviceWorker.getRegistrations() und registration.unregister() werden verwendet, um die Registrierung eines Service Workers aufzuheben. Nach dem Abmelden zeigen wir eine Meldung auf der Webseite an.

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

Nach dem Login kopieren

Das Leeren des Caches ist eine bewährte Vorgehensweise, kann jedoch manchmal die Leistung einer Webseite beeinträchtigen, da alle Dateien erneut abgerufen werden müssen. JavaScript verfügt über die Möglichkeit, den Cache zu leeren, der bei Bedarf verwendet werden kann.

Das obige ist der detaillierte Inhalt vonWie lösche ich den Cache mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!