Wyczyść pamięć podręczną w JavaScript

Jak wyczyścić pamięć podręczną przeglądarki za pomocą JavaScript?

Wdrożyliśmy najnowszy kod JavaScript, ale nie możemy pobrać najnowszego kodu JavaScript.

Uwaga redakcyjna: to pytanie jest częściowo powtórzone w poniższych miejscach, a odpowiedź na pierwsze z poniższych pytań jest prawdopodobnie najlepsza. Ta zaakceptowana odpowiedź nie jest już idealnym rozwiązaniem.

Jak zmusić przeglądarkę do ponownego załadowania buforowanych plików CSS / JS?

Jak zmusić klientów do odświeżenia plików JavaScript?

Dynamicznie przeładuj lokalne dane źródłowe / json JavaScript

Możesz wywołać window.location.reload (true), aby ponownie załadować bieżącą stronę. Zignoruje wszelkie elementy z pamięci podręcznej i pobierze nowe kopie strony, css, obrazów, JavaScript itp. Z serwera. Nie powoduje to wyczyszczenia całej pamięci podręcznej, ale powoduje wyczyszczenie pamięci podręcznej strony, na której się znajdujesz.

Jednak najlepszą strategią jest utworzenie wersji ścieżki lub nazwy pliku, jak wspomniano w różnych innych odpowiedziach. Ponadto, zobacz Revving Filenames: nie używaj querystring z powodów, których nie należy używać ?v=njako schematu wersji.

Nie możesz wyczyścić pamięci podręcznej za pomocą javascript. Typowym sposobem jest dołączenie numeru wersji lub ostatniej aktualizacji znacznika czasu do pliku, na przykład:

myscript.123.js

lub

myscript.js?updated=1234567890

Spróbuj zmienić src pliku JavaScript? Od tego:

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

Do tego:

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

Ta metoda powinna zmusić przeglądarkę do załadowania nowej kopii pliku JS.

Oprócz buforowania co godzinę lub co tydzień możesz buforować dane zgodnie z danymi pliku.

Przykład (w PHP):

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

lub nawet użyj czasu modyfikacji pliku:

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

Możesz także wymusić ponowne ładowanie kodu co godzinę, na przykład w PHP:

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

lub

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

umieść to na końcu swojego szablonu:

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

spróbuj tego użyć

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

Do tego:

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

Oto fragment tego, czego używam w moim najnowszym projekcie.

Ze sterownika:

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

Z widoku:

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

Nasz proces publikowania generuje plik z numerem wersji bieżącej kompilacji. Działa to poprzez kodowanie adresu URL tego pliku i używanie go jako pomijania pamięci podręcznej. W przypadku awarii, jeśli ten plik nie istnieje, używany jest rok i numer tygodnia, dzięki czemu buforowanie nadal działa i będzie odświeżane co najmniej raz w tygodniu.

Ponadto zapewnia to pomijanie pamięci podręcznej przy każdym załadowaniu strony w środowisku programistycznym, dzięki czemu programiści nie muszą martwić się o czyszczenie pamięci podręcznej z jakichkolwiek zasobów (javascript, css, wywołania ajax itp.).

lub możesz po prostu odczytać plik js przez serwer za pomocą file_get_contets, a następnie wstawić echo w nagłówku zawartość js

Może „wyczyszczenie pamięci podręcznej” nie jest tak łatwe, jak powinno. Zamiast czyścić pamięć podręczną w moich przeglądarkach, zdałem sobie sprawę, że „dotknięcie” pliku w rzeczywistości zmieni datę pliku źródłowego zapisanego w pamięci podręcznej na serwerze (Testowane na Edge, Chrome i Firefox), a większość przeglądarek automatycznie pobierze najnowszą, świeżą kopię pliku co jest na twoim serwerze (kod, grafika, wszelkie multimedia). Proponuję po prostu skopiować najbardziej aktualne skrypty na serwerze i „zrobić dotyk rzecz” rozwiązanie przed swoimi przebiegów programu, więc będzie to zmienić datę wszystkich plików problemowych do najbardziej aktualnej daty i czasu, a następnie pobiera nową kopię do Twojej przeglądarki:

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

... reszta twojego programu ...

Zajęło mi trochę czasu, aby rozwiązać ten problem (ponieważ wiele przeglądarek działa inaczej na różne polecenia, ale wszystkie sprawdzają czas plików i porównują z pobraną kopią w przeglądarce, jeśli inna data i godzina, odświeży się), jeśli nie może pójść w rzekomy sposób, zawsze istnieje inne użyteczne i lepsze rozwiązanie. Pozdrawiam i szczęśliwego kempingu.

Miałem kłopoty z kodem sugerowanym przez yboussarda. Wewnętrzna pętla j nie działała. Oto zmodyfikowany kod, którego używam z powodzeniem.

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

Jeśli używasz php, możesz zrobić:

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

Cache.delete () może być używany dla nowych przeglądarek Chrome, Firefox i Opera.

Prosimy nie podawać błędnych informacji. Cache API to inny typ pamięci podręcznej niż pamięć podręczna http

Pamięć podręczna HTTP jest uruchamiana, gdy serwer wysyła prawidłowe nagłówki , nie możesz uzyskać dostępu za pomocą javasvipt.

Cache api z drugiej strony jest uruchamiany, kiedy chcesz, jest to przydatne podczas pracy z pracownikiem usług, dzięki czemu można przecinać żądanie i odpowiadać na nie z tego typu pamięci podręcznej patrz: ilustracja 1 ilustracja 2 kurs

Możesz użyć tych technik, aby zawsze mieć świeżą zawartość dla swoich użytkowników:

1. Użyj location.reload (true) to nie działa dla mnie, więc nie polecam tego.
2. Użyj Cache API , aby zapisać w pamięci podręcznej i przeciąć żądanie z Service Workerem , uważaj na to, ponieważ jeśli serwer wysłał nagłówki pamięci podręcznej dla plików, które chcesz odświeżyć, przeglądarka odpowie najpierw z pamięci podręcznej HTTP, a jeśli go nie znajdzie, to trafi do sieci, więc możesz skończyć ze starym plikiem
3. Zmień adres URL z plików stactics, zalecam, aby nadać mu nazwę ze zmianą zawartości plików, używam md5, a następnie konwertuję go na przyjazny ciąg i adres URL, a md5 zmieni się wraz z zawartością pliku, tam może swobodnie wysyłać wystarczająco długo nagłówki pamięci podręcznej HTTP

Trzeci poleciłbym zobaczyć

Możesz również wyłączyć buforowanie przeglądarki za pomocą metatagów HTML, po prostu umieść tagi HTML w sekcji nagłówka, aby uniknąć buforowania strony internetowej podczas kodowania / testowania, a kiedy skończysz, możesz usunąć metatagi.

(w sekcji głównej)

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

Odśwież swoją stronę po wklejeniu tego w głowie i odśwież również nowy kod javascript.

Ten link daje Ci inne opcje, jeśli ich potrzebujesz http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

lub możesz po prostu utworzyć taki przycisk

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

odświeża się i unika buforowania, ale będzie tam na twojej stronie do zakończenia testowania, wtedy możesz go zdjąć. Najlepsza opcja na pięść.

Mam tendencję do tworzenia wersji mojego frameworka, a następnie stosuję numer wersji do skryptów i ścieżek stylów

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

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

zamknij i otwórz przeglądarkę po wykonaniu kodu w konsoli.

window.location.reload(true)wydaje się być przestarzały w standardzie HTML5. Jednym ze sposobów na zrobienie tego bez używania ciągów zapytań jest użycie Clear-Site-Datanagłówka , który wydaje się być ustandaryzowany .

Ponieważ pamięć podręczna przeglądarki przechowuje ten sam link, należy dodać losowy koniec adresu URL. new Date().getTime()wygenerować inny numer.

Poprostu dodaj new Date().getTime() koniec linku jak połączenie

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

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