Leeren Sie den Cache in JavaScript

Wie lösche ich einen Browser-Cache mit JavaScript?

Wir haben den neuesten JavaScript-Code bereitgestellt, können jedoch den neuesten JavaScript-Code nicht abrufen.

Anmerkung der Redaktion: Diese Frage wird an den folgenden Stellen halb dupliziert, und die Antwort in der ersten der folgenden Fragen ist wahrscheinlich die beste. Diese akzeptierte Antwort ist nicht mehr die ideale Lösung.

Wie kann man den Browser zwingen, zwischengespeicherte CSS / JS-Dateien neu zu laden?

Wie kann ich Clients zwingen, JavaScript-Dateien zu aktualisieren?

Laden Sie lokale Javascript-Quell- / JSON-Daten dynamisch neu

Sie können window.location.reload (true) aufrufen , um die aktuelle Seite neu zu laden. Es werden alle zwischengespeicherten Elemente ignoriert und neue Kopien der Seite, des CSS, der Bilder, des JavaScript usw. vom Server abgerufen. Dadurch wird nicht der gesamte Cache geleert, sondern der Cache für die Seite, auf der Sie sich befinden, wird geleert.

Ihre beste Strategie ist jedoch, den Pfad oder Dateinamen wie in verschiedenen anderen Antworten angegeben zu versionieren. Weitere Informationen finden Sie unter Überarbeiten von Dateinamen: Verwenden Sie Querystring nicht aus Gründen, die nicht ?v=nals Versionsschema verwendet werden sollen.

Sie können den Cache nicht mit Javascript leeren. Eine übliche Methode besteht darin, die Revisionsnummer oder den zuletzt aktualisierten Zeitstempel wie folgt an die Datei anzuhängen:

myscript.123.js

oder

myscript.js?updated=1234567890

Versuchen Sie, die src der JavaScript-Datei zu ändern? Davon:

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

Dazu:

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

Diese Methode sollte Ihren Browser zwingen, eine neue Kopie der JS-Datei zu laden.

Abgesehen vom stündlichen oder wöchentlichen Caching können Sie das Cache nach Dateidaten durchführen.

Beispiel (in PHP):

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

oder verwenden Sie sogar die Änderungszeit für Dateien:

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

Sie können auch erzwingen, dass der Code in PHP jede Stunde wie folgt neu geladen wird:

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

oder

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

Fügen Sie dies am Ende Ihrer Vorlage ein:

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

versuche es damit

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

Dazu:

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

Hier ist ein Ausschnitt dessen, was ich für mein aktuelles Projekt verwende.

Von der Steuerung:

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

Aus der Sicht:

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

Unser Veröffentlichungsprozess generiert eine Datei mit der Versionsnummer des aktuellen Builds. Dies funktioniert durch URL-Codierung dieser Datei und Verwendung als Cache-Buster. Wenn diese Datei nicht vorhanden ist, werden als Failover die Jahres- und Wochennummer verwendet, damit das Caching weiterhin funktioniert, und sie wird mindestens einmal pro Woche aktualisiert.

Dies bietet auch Cache-Busting für jedes Laden von Seiten in der Entwicklungsumgebung, sodass Entwickler sich nicht darum kümmern müssen, den Cache für Ressourcen (Javascript, CSS, Ajax-Aufrufe usw.) zu leeren.

oder Sie können einfach die js-Datei von Server zu Server mit file_get_contets lesen und dann den js-Inhalt in den Header einfügen

Vielleicht ist das "Löschen des Caches" nicht so einfach, wie es sein sollte. Anstatt den Cache in meinen Browsern zu leeren, wurde mir klar, dass durch "Berühren" der Datei das Datum der auf dem Server zwischengespeicherten Quelldatei (auf Edge, Chrome und Firefox getestet) geändert wird und die meisten Browser automatisch die aktuellste Kopie von herunterladen Was ist auf Ihrem Server (Code, Grafiken und Multimedia). Ich schlage vor, Sie kopieren einfach die aktuellsten Skripte auf den Server und "do the touch thing" -Lösung, bevor Ihr Programm ausgeführt wird. Dadurch wird das Datum aller Ihrer Problemdateien auf das aktuellste Datum und die aktuellste Uhrzeit geändert und anschließend eine neue Kopie heruntergeladen zu Ihrem Browser:

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

... der Rest Ihres Programms ...

Ich habe einige Zeit gebraucht, um dieses Problem zu beheben (da viele Browser unterschiedlich auf verschiedene Befehle reagieren, aber alle die Uhrzeit der Dateien überprüfen und mit Ihrer heruntergeladenen Kopie in Ihrem Browser vergleichen, wenn Datum und Uhrzeit unterschiedlich sind, wird die Aktualisierung durchgeführt) kann nicht den vermeintlich richtigen Weg gehen, es gibt immer eine andere brauchbare und bessere Lösung dafür. Beste Grüße und viel Spaß beim Zelten.

Ich hatte einige Probleme mit dem von yboussard vorgeschlagenen Code. Die innere j-Schleife hat nicht funktioniert. Hier ist der geänderte Code, den ich mit Erfolg verwende.

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

Wenn Sie PHP verwenden, können Sie:

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

Cache.delete () kann für neues Chrome, Firefox und Oper verwendet werden.

Bitte geben Sie keine falschen Informationen an. Die Cache-API ist eine andere Art von Cache als der http-Cache

Der HTTP-Cache wird ausgelöst, wenn der Server die richtigen Header sendet , auf die Sie mit javasvipt nicht zugreifen können.

Die Cache-API hingegen wird ausgelöst, wenn Sie möchten. Dies ist nützlich, wenn Sie mit einem Servicemitarbeiter zusammenarbeiten, damit Sie Anforderungen überschneiden und von diesem Cache-Typ aus beantworten können. Siehe: Abbildung 1 Abbildung 2 Kurs

Sie können diese Techniken verwenden, um immer einen frischen Inhalt für Ihre Benutzer zu haben:

1. Verwenden Sie location.reload (true) Dies funktioniert bei mir nicht, daher würde ich es nicht empfehlen.
2. Verwenden Sie die Cache-API , um im Cache zu speichern und die Anforderung mit dem Service Worker zu überschneiden. Seien Sie vorsichtig mit dieser, da der Server die Cache-Header gesendet hat der Browser zuerst aus dem HTTP-Cache antwortet, für die Dateien möchten. und wenn es es nicht findet, wird es an das Netzwerk weitergeleitet, sodass Sie möglicherweise eine alte Datei erhalten
3. Ändern Sie die URL Ihrer Stactics-Dateien. Ich empfehle Ihnen, sie mit der Änderung des Inhalts Ihrer Dateien zu benennen. Ich verwende md5 und konvertiere sie dann in eine Zeichenfolge und URL-freundlich. Die MD5 ändert sich mit dem Inhalt der Datei kann HTTP-Cache-Header lange genug frei senden

Ich würde die dritte empfehlen see

Ich neige dazu, mein Framework zu versionieren und dann die Versionsnummer auf Skript- und Stilpfade anzuwenden

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

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

Schließen und öffnen Sie den Browser, nachdem Sie den Code in der Konsole ausgeführt haben.

Sie können das Browser-Caching auch mit Meta-HTML-Tags deaktivieren. Fügen Sie einfach HTML-Tags in den Kopfbereich ein, um zu vermeiden, dass die Webseite beim Codieren / Testen zwischengespeichert wird. Wenn Sie fertig sind, können Sie die Meta-Tags entfernen.

(im Kopfbereich)

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

Aktualisieren Sie Ihre Seite, nachdem Sie diese in den Kopf eingefügt haben, und aktualisieren Sie auch den neuen Javascript-Code.

Über diesen Link erhalten Sie weitere Optionen, falls Sie diese benötigen. Http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

oder Sie können einfach eine Schaltfläche wie diese erstellen

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

Es wird aktualisiert und das Zwischenspeichern vermieden. Es wird jedoch auf Ihrer Seite angezeigt, bis Sie den Test abgeschlossen haben. Anschließend können Sie es entfernen. Faust Option ist am besten ich Sache.

Da der Browser denselben Link zwischenspeichert, sollten Sie ein zufälliges Ende der URL hinzufügen. new Date().getTime()eine andere Nummer generieren.

Fügen Sie einfach das new Date().getTime()Ende des Links wie einen Anruf hinzu

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

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

window.location.reload(true)scheint vom HTML5-Standard veraltet zu sein. Eine Möglichkeit, dies ohne Verwendung von Abfragezeichenfolgen zu tun, besteht darin, den Clear-Site-DataHeader zu verwenden , der standardisiert zu sein scheint .