limpiar - Borrar la caché en JavaScript

meta limpiar cache

Question

¿Cómo borro un caché de navegadores con JavaScript?

Implementamos el código JavaScript más reciente, pero no podemos obtener el código JavaScript más reciente.

Nota editorial: esta pregunta está semi-duplicada en los siguientes lugares, y la respuesta en la primera de las siguientes preguntas es probablemente la mejor. Esta respuesta aceptada ya no es la solución ideal.

¿Cómo forzar al navegador a recargar los archivos CSS / JS en caché?

¿Cómo puedo obligar a los clientes a actualizar los archivos JavaScript?

Recarga dinámicamente los datos fuente / json locales de Javascript

Answer 1

Además del almacenamiento en caché cada hora, o cada semana, puede almacenar en caché según los datos del archivo.

Ejemplo (en PHP):

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

o incluso:

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

Answer 2

Aquí hay un fragmento de lo que estoy usando para mi último proyecto.

Desde el controlador:

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

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

Nuestro proceso de publicación genera un archivo con el número de revisión de la compilación actual. Esto funciona por URL codificando ese archivo y usándolo como un destructor de caché. Como un fail-over, si ese archivo no existe, se usan el número de año y semana para que el almacenamiento en caché todavía funcione, y se actualizará al menos una vez a la semana.

Además, esto proporciona protección contra caché para cada carga de página mientras se está en el entorno de desarrollo, de modo que los desarrolladores no tengan que preocuparse por borrar el caché de los recursos (javascript, css, ajax, etc.).

Answer 3

Intenta cambiar el src del archivo JavaScript? De esto:

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

A esto:

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

Este método debe obligar a su navegador a cargar una nueva copia del archivo JS.

Answer 4

No puede borrar la caché con javascript. Una forma común es agregar el número de revisión o la última marca de tiempo actualizada al archivo, así:

myscript.123.js

o

myscript.js?updated=1234567890

Answer 5

Puede llamar a window.location.reload(true) para volver a cargar la página actual. Ignorará los elementos en caché y recuperará nuevas copias de la página, css, imágenes, JavaScript, etc. del servidor. Esto no borra todo el caché, pero tiene el efecto de borrar el caché de la página en la que se encuentra.

Sin embargo, su mejor estrategia es versionar la ruta o el nombre del archivo como se menciona en varias otras respuestas. Además, consulte Revving Filenames: no use querystring por razones de no usar ?v=n como esquema de control de versiones.

Answer 6

Si está utilizando php puede hacerlo:

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

Answer 7

Tal vez "borrar el caché" no es tan fácil como debería ser. En lugar de borrar el caché en mis navegadores, me di cuenta de que "tocar" el archivo cambiará la fecha del archivo fuente almacenado en caché en el servidor (probado en Edge, Chrome y Firefox) y la mayoría de los navegadores descargarán automáticamente la copia fresca más reciente de ¿Qué pasa en su servidor (código, gráficos y multimedia también). Le sugiero que copie los scripts más recientes en el servidor y la solución "toque" antes de que se ejecute su programa, por lo que cambiará la fecha de todos sus archivos problemáticos a la fecha y hora más actual, luego se descargará una copia nueva a su navegador:

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

... el resto de tu programa ...

Me tomó algo de tiempo resolver este problema (ya que muchos navegadores actúan de forma diferente a comandos diferentes, pero todos verifican el tiempo de los archivos y lo comparan con su copia descargada en su navegador, si la fecha y la hora son diferentes, harán la actualización), si no puede seguir el camino correcto, siempre hay otra solución utilizable y mejor. Saludos cordiales y feliz acampar.

Answer 8

También puede forzar que el código se vuelva a cargar cada hora, como este, en 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>

Answer 9

Tiendo a versionar mi framework y luego aplicar el número de versión a las rutas de script y estilo

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

Answer 10

Tuve algunos problemas con el código sugerido por yboussard. El bucle j interno no funcionó. Aquí está el código modificado que uso con éxito.

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

Answer 11

intenta usar esto

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

A esto:

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

Answer 12

o simplemente puede leer el archivo js por servidor con file_get_contets y luego poner en echo en el encabezado el contenido de js

Answer 13

pon esto al final de tu plantilla:

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

Answer 14

Cache.delete() se puede usar para nuevos cromo, firefox y opera.

Answer 15

  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;

      })
   }

Answer 16

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

cierre y abra el navegador después de ejecutar el código en la consola.