Cancella la cache in JavaScript

Come svuotare la cache di un browser con JavaScript?

Abbiamo implementato l’ultimo codice JavaScript ma non siamo in grado di ottenere il codice JavaScript più recente.

Nota editoriale: questa domanda è semi-duplicata nei seguenti luoghi e la risposta nella prima delle seguenti domande è 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 dynamicmente i dati sorgente / json locali Javascript

È ansible 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. Ciò non cancella l’intera cache, ma ha l’effetto di svuotare la cache per la pagina triggers.

Tuttavia, la tua strategia migliore è quella di eseguire la versione del percorso o del nome file come menzionato in varie altre risposte. Inoltre, consultare Revving Filenames: non utilizzare querystring per motivi che non si utilizzano ?v=n come schema di versioning.

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

 myscript.123.js 

o

myscript.js?updated=1234567890

Prova a cambiare lo src del file JavaScript? Da questa:

  

A questa:

  

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

A parte il caching ogni ora o ogni settimana, è ansible memorizzare la cache in base ai dati del file.

Esempio (in PHP):

  

o anche:

  

Puoi anche forzare il caricamento del codice ogni ora, come in PHP:

 '; ?> 

o

  

metti questo 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 -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 a usare questo

   

A questa:

   

Ecco un frammento di ciò che sto utilizzando 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:

   

Il nostro processo di pubblicazione genera un file con il numero di revisione della build corrente. Funziona con l’URL che codifica quel file e lo utilizza come cache buster. In caso di failover, se il file non esiste, vengono utilizzati il ​​numero dell’anno e della settimana in modo che il caching funzioni ancora e verrà aggiornato 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 leggere il file js dal server con file_get_contets e poi inserire nell’intestazione l’intestazione del contenuto di js

Se stai usando php puoi farlo:

   

Ho avuto alcuni problemi con il codice suggerito da yboussard. Il ciclo j interno non ha funzionato. Ecco il codice modificato che utilizzo 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; } } } } 

Forse “cancellare la cache” non è così semplice come dovrebbe essere. Invece di svuotare la cache dei miei browser, mi sono reso conto che “toccare” il file cambierà effettivamente la data del file sorgente memorizzato sul server (Testato su Edge, Chrome e Firefox) e la maggior parte dei browser scaricherà automaticamente la copia più recente di che cosa è sul tuo server (codice, grafica anche multimediale). Ti suggerisco di copiare gli script più recenti sul server e la soluzione “fai il touch” prima dell’esecuzione del programma, quindi cambierà la data di tutti i tuoi file problematici in una data e ora più recenti, quindi scaricherà una nuova copia al tuo browser:

 `` 

… il resto del tuo programma …

Mi ci è voluto un po ‘di tempo per risolvere questo problema (dato che molti browser si comportano diversamente con comandi diversi, ma controllano tutti i tempi dei file e li confrontano con la tua copia scaricata nel browser, se la data e l’ora sono diverse, eseguirà l’aggiornamento). non può andare nel modo giusto supposto, c’è sempre un’altra soluzione utile e migliore ad esso. I migliori saluti e buon campeggio.

Tendo a eseguire la versione del mio framework, quindi applico il numero di versione ai percorsi di script e di stile

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

chiudi e apri il browser dopo aver eseguito il codice nella console.

Cache.delete () può essere utilizzato per nuovi chrome, firefox e opera.

Si prega di non dare informazioni errate. Cache api è un diverso tipo di cache dalla cache http

La cache HTTP viene triggersta quando il server invia le intestazioni corrette, non è ansible accedere con javasvipt.

L’api cache viene invece triggersta quando lo si desidera, è utile quando si lavora con l’addetto all’assistenza in modo da poter intersecare la richiesta e rispondere da questo tipo di cache. Vedere: ilustration 1 ilustration 2 course

Potresti usare queste tecniche per avere sempre un nuovo contenuto sui tuoi utenti:

  1. Usa location.reload (true) questo non funziona per me, quindi non lo consiglierei.
  2. Usa la cache api per salvare nella cache e intersecare la richiesta con l’addetto al 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, passerà alla rete, quindi potresti finire con il vecchio file
  3. Cambia l’url dai tuoi file stactics, la mia raccomandazione è che dovresti nominarlo con il cambio del contenuto dei tuoi file, io uso md5 e poi lo converto in string e url friendly, e l’md5 cambierà con il contenuto del file, lì tu può inviare liberamente intestazioni della cache HTTP abbastanza a lungo

Vorrei raccomandare il terzo vedere

  var clearCache = function(cacheName){ return caches.open(cacheName).then(function(cache) { cache.keys().then(function(keys) { keys.forEach(function(request, index, array) { cache.delete(request); // console.log(`deleted ${request}`) }); }); }) } var updated = localStorage.getItem("v2-update"); if(!updated){ localStorage.setItem('v2-update', true); caches.keys().then(function(keyList) { console.log(keyList, "caches") for(var i = 0;i < keyList.length;i++){ var cacheKeyName = keyList[i] if(cacheKeyName !== "images"){ console.log('clear', cacheKeyName) clearCache(cacheKeyName); } } return; }) }