Wie lösche ich den Cache mit 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);
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>
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();
}
});
}
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>
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Wie erstelle ich meine eigenen JavaScript -Bibliotheken?
Mar 18, 2025 pm 03:12 PM
In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.
Wie optimiere ich den JavaScript -Code für die Leistung im Browser?
Mar 18, 2025 pm 03:14 PM
In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.
Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße?
Apr 04, 2025 pm 02:42 PM
Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...
Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools?
Mar 18, 2025 pm 03:16 PM
In dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.
Wie verwende ich Quellkarten zum Debuggen, um den JavaScript -Code zu debuggen?
Mar 18, 2025 pm 03:17 PM
In dem Artikel wird erläutert, wie Quellkarten zum Debuggen von JavaScript verwendet werden, indem er auf den ursprünglichen Code zurückgegeben wird. Es wird erläutert, dass Quellenkarten aktiviert, Breakpoints eingestellt und Tools wie Chrome Devtools und WebPack verwendet werden.
Wer bekommt mehr Python oder JavaScript bezahlt?
Apr 04, 2025 am 12:09 AM
Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.
Erste Schritte mit Chart.js: Kuchen-, Donut- und Bubble -Diagramme
Mar 15, 2025 am 09:19 AM
In diesem Tutorial wird erläutert, wie man mit Diagramm.js Kuchen-, Ring- und Bubble -Diagramme erstellt. Zuvor haben wir vier Chart -Arten von Charts gelernt. Erstellen Sie Kuchen- und Ringdiagramme Kreisdiagramme und Ringdiagramme sind ideal, um die Proportionen eines Ganzen anzuzeigen, das in verschiedene Teile unterteilt ist. Zum Beispiel kann ein Kreisdiagramm verwendet werden, um den Prozentsatz der männlichen Löwen, weiblichen Löwen und jungen Löwen in einer Safari oder den Prozentsatz der Stimmen zu zeigen, die verschiedene Kandidaten bei der Wahl erhalten. Kreisdiagramme eignen sich nur zum Vergleich einzelner Parameter oder Datensätze. Es ist zu beachten, dass das Kreisdiagramm keine Entitäten ohne Wert zeichnen kann, da der Winkel des Lüfters im Kreisdiagramm von der numerischen Größe des Datenpunkts abhängt. Dies bedeutet jede Entität ohne Anteil
TypeScript für Anfänger, Teil 2: Grundlegende Datentypen
Mar 19, 2025 am 09:10 AM
Sobald Sie das Typscript-Tutorial für Einstiegsklasse gemeistert haben, sollten Sie in der Lage sein, Ihren eigenen Code in eine IDE zu schreiben, die TypeScript unterstützt und in JavaScript zusammenfasst. Dieses Tutorial wird in verschiedenen Datentypen in TypeScript eingetaucht. JavaScript hat sieben Datentypen: NULL, UNDEFINED, BOOLEAN, NUMMER, STRING, SYMBOL (durch ES6 eingeführt) und Objekt. TypeScript definiert mehr Typen auf dieser Grundlage, und dieses Tutorial wird alle ausführlich behandelt. Null -Datentyp Wie JavaScript, null in TypeScript
