Cancella la cache in JavaScript

Come posso cancellare una cache del browser con JavaScript?

Abbiamo distribuito l'ultimo codice JavaScript ma non siamo in grado di ottenere l'ultimo codice JavaScript.

Nota editoriale: questa domanda è semi-duplicata nei seguenti luoghi e la risposta nella prima delle domande seguenti è probabilmente la migliore. Questa risposta accettata non è più la soluzione ideale.

Come forzare il browser a ricaricare i file CSS / JS memorizzati nella cache?

Come posso forzare i client ad aggiornare i file JavaScript?

Ricarica dinamicamente i dati sorgente / json Javascript locali

Puoi chiamare window.location.reload (true) per ricaricare la pagina corrente. Ignorerà tutti gli elementi memorizzati nella cache e recupererà nuove copie della pagina, CSS, immagini, JavaScript, ecc. Dal server. Questo non cancella l'intera cache, ma ha l'effetto di cancellare la cache per la pagina in cui ti trovi.

Tuttavia, la tua migliore strategia è quella di versioni il percorso o il nome del file, come indicato in varie altre risposte. Inoltre, vedi Revving Nomi file: non utilizzare la querystring per motivi da non utilizzare ?v=ncome schema di controllo delle versioni.

Non è possibile cancellare la cache con JavaScript. Un modo comune è quello di aggiungere al file il numero di revisione o l'ultimo timestamp aggiornato, in questo modo:

myscript.123.js

o

myscript.js?updated=1234567890

Prova a cambiare l'src del file JavaScript? Da questa:

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

A questa:

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

Questo metodo dovrebbe forzare il tuo browser a caricare una nuova copia del file JS.

Oltre alla memorizzazione nella cache ogni ora o ogni settimana, è possibile memorizzare nella cache in base ai dati del file.

Esempio (in PHP):

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

o addirittura utilizzare il tempo di modifica del file:

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

Puoi anche forzare il ricaricamento del codice ogni ora, in questo modo, in PHP:

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

o

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

mettilo alla fine del tuo modello:

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

prova ad usare questo

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

A questa:

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

Ecco un frammento di quello che sto usando per il mio ultimo progetto.

Dal controller:

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

Dalla vista:

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

Il nostro processo di pubblicazione genera un file con il numero di revisione della build corrente. Funziona tramite la codifica URL di quel file e utilizzandolo come buster della cache. Come failover, se quel file non esiste, vengono utilizzati il ​​numero di anno e settimana in modo che la memorizzazione nella cache funzioni ancora e verrà aggiornata almeno una volta alla settimana.

Inoltre, questo fornisce il busting della cache per ogni caricamento della pagina mentre si trova nell'ambiente di sviluppo, in modo che gli sviluppatori non debbano preoccuparsi di svuotare la cache per qualsiasi risorsa (javascript, css, chiamate ajax, ecc.).

oppure puoi semplicemente leggere il file js dal server con file_get_contets e quindi inserire l'eco nell'intestazione del contenuto js

Forse "svuotare la cache" non è così facile come dovrebbe essere. Invece di svuotare la cache sui miei browser, mi sono reso conto che "toccando" il file cambierà effettivamente la data del file di origine memorizzato nella cache sul server (testato su Edge, Chrome e Firefox) e la maggior parte dei browser scaricherà automaticamente la copia aggiornata più recente di cosa c'è sul tuo server (codice, grafica anche qualsiasi multimedia). Ti suggerisco di copiare gli script più recenti sul server e la soluzione "fai la cosa del tocco" prima dell'esecuzione del programma, quindi cambierà la data di tutti i tuoi file problematici in una data e ora più attuali, quindi scaricherà una nuova copia al tuo browser:

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

... il resto del tuo programma ...

Mi ci è voluto del tempo per risolvere questo problema (poiché molti browser agiscono in modo diverso a comandi diversi, ma tutti controllano l'ora dei file e si confrontano con la copia scaricata nel browser, se data e ora diverse eseguiranno l'aggiornamento), Se si non posso andare nel modo giusto supposto, c'è sempre un'altra soluzione utilizzabile e migliore. I migliori saluti e buon campeggio.

Ho avuto qualche problema con il codice suggerito da yboussard. Il ciclo j interno non ha funzionato. Ecco il codice modificato che uso con successo.

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

Se stai usando php puoi fare:

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

Cache.delete () può essere utilizzato per i nuovi Chrome, Firefox e Opera.

Si prega di non fornire informazioni errate. La cache api è un tipo diverso di cache dalla cache http

La cache HTTP viene attivata quando il server invia le intestazioni corrette , non è possibile accedervi con javasvipt.

Api Cache nell'altra mano viene attivato quando si vuole, è utile quando si lavora con operaio di servizio in modo da poter intersecano richiesta e rispondere da questo tipo di cache di vedere: ilustration 1 ilustration 2 corso

Puoi utilizzare queste tecniche per avere sempre un nuovo contenuto sui tuoi utenti:

1. Usa location.reload (true) per me non funziona, quindi non lo consiglierei.
2. Utilizza l' API della cache per salvare nella cache e intersecare la richiesta con il lavoratore del servizio , fai attenzione con questo perché se il server ha inviato le intestazioni della cache per i file che desideri aggiornare, il browser risponderà prima dalla cache HTTP, e se non lo trova, andrà in rete, quindi potresti finire con un vecchio file
3. Cambia l'URL dai tuoi file di tattica, la mia raccomandazione è che dovresti nominarlo con la modifica del contenuto dei tuoi file, io uso md5 e poi lo converto in stringa e url amichevole, e la md5 cambierà con il contenuto del file, lì può inviare liberamente le intestazioni della cache HTTP abbastanza a lungo

Consiglierei il terzo vedere

Puoi anche disabilitare la memorizzazione nella cache del browser con i meta tag HTML, basta inserire i tag html nella sezione head per evitare che la pagina web venga memorizzata nella cache mentre stai programmando / test e quando hai finito puoi rimuovere i meta tag.

(nella sezione testa)

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

Aggiorna la tua pagina dopo averlo incollato in testa e dovrebbe aggiornare anche il nuovo codice javascript.

Questo link ti darà altre opzioni se ne hai bisogno http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

oppure puoi semplicemente creare un pulsante in questo modo

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

si aggiorna ed evita la memorizzazione nella cache, ma rimarrà lì sulla tua pagina fino al termine del test, quindi puoi rimuoverlo. L'opzione del pugno è la cosa migliore.

Tendo a versione mio framework quindi applicare il numero di versione per script e percorsi di stile

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

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

chiudere e aprire il browser dopo aver eseguito il codice nella console.

window.location.reload(true)sembra essere stato deprecato dallo standard HTML5. Un modo per farlo senza usare le stringhe di query è usare l' Clear-Site-Dataintestazione , che sembra essere standardizzata .

Perché lo stesso collegamento nella cache del browser, è necessario aggiungere un numero casuale alla fine dell'URL. new Date().getTime()generare un numero diverso.

Aggiungi la new Date().getTime()fine del collegamento come una chiamata

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

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