Borrar el caché en JavaScript

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

Implementamos el último código JavaScript pero no podemos obtener el último código JavaScript.

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 forzar a los clientes a actualizar archivos JavaScript?

Recarga dinámicamente fuente Javascript local / datos json

Puede llamar a window.location.reload (true) para volver a cargar la página actual. Ignorará cualquier elemento almacenado 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 de archivo como se menciona en varias otras respuestas. Además, vea Revving Filenames: no use la cadena de consulta por razones que no debe usar ?v=ncomo su esquema de versiones.

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

myscript.123.js

o

myscript.js?updated=1234567890

Intenta cambiar el archivo src de 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 debería obligar a su navegador a cargar una nueva copia del archivo JS.

Además del almacenamiento en caché cada hora o cada semana, puede almacenar en caché de acuerdo con los datos del archivo.

Ejemplo (en PHP):

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

o incluso usar el tiempo de modificación del archivo:

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

También puede forzar la recarga del código cada hora, de esta manera, 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>

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

intenta usar esto

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

A esto:

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

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 codificando URL ese archivo y usándolo como un destructor de caché. Como una conmutación por error, si ese archivo no existe, el número de año y semana se usa para que el almacenamiento en caché aún funcione, y se actualizará al menos una vez por semana.

Además, esto proporciona el almacenamiento en caché para cada carga de página mientras está en el entorno de desarrollo para que los desarrolladores no tengan que preocuparse por borrar el caché de ningún recurso (javascript, css, llamadas ajax, etc.).

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

Quizás "borrar el caché" no sea tan fácil como debería ser. En lugar de borrar el caché en mis navegadores, me di cuenta de que "tocar" el archivo en realidad 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 actualizada más reciente de qué hay en su servidor (código, gráficos, cualquier multimedia también). Le sugiero que simplemente copie las secuencias de comandos más recientes en el servidor y la solución "haga lo táctil" 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 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 manera diferente a los diferentes comandos, pero todos verifican la hora de los archivos y se comparan con la copia descargada en su navegador, si la fecha y la hora son diferentes, se actualizarán), si usted no puede ir por el supuesto camino correcto, siempre hay otra solución utilizable y mejor. Saludos cordiales y feliz campamento.

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

Si está utilizando php puede hacer:

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

Cache.delete () se puede usar para nuevos Chrome, Firefox y Opera.

Por favor no brinde información incorrecta. La API de caché es un tipo de caché diferente del caché http

El caché HTTP se activa cuando el servidor envía los encabezados correctos , no puede acceder con javasvipt.

La API de caché, por otro lado, se dispara cuando lo desea, es útil cuando se trabaja con el trabajador del servicio para que pueda intersectar la solicitud y responderla desde este tipo de caché, consulte: ilustración 1 ilustración 2 curso

Puede utilizar estas técnicas para tener siempre un contenido nuevo en sus usuarios:

1. Use location.reload (verdadero) esto no funciona para mí, por lo que no lo recomendaría.
2. Use la API de caché para guardar en la caché e intersecar la solicitud con el trabajador de servicio , tenga cuidado con esta porque si el servidor ha enviado los encabezados de la caché para los archivos que desea actualizar, el navegador responderá primero desde el caché HTTP, y si no lo encuentra, irá a la red, para que pueda terminar con un archivo antiguo
3. Cambie la url de sus archivos estáticos, mi recomendación es que debe nombrarlo con el cambio del contenido de sus archivos, uso md5 y luego lo convierto en cadena y url amigable, y el md5 cambiará con el contenido del archivo, allí usted puede enviar libremente encabezados de caché HTTP el tiempo suficiente

Recomendaría el tercero ver

También puede deshabilitar el almacenamiento en caché del navegador con metaetiquetas HTML simplemente coloque etiquetas html en la sección de encabezado para evitar que la página web se almacene en caché mientras está codificando / probando y cuando haya terminado, puede eliminar las metaetiquetas.

(en la sección de la cabeza)

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

Actualice su página después de pegar esto en la cabeza y también debería actualizar el nuevo código de JavaScript.

Este enlace le dará otras opciones si las necesita http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

o simplemente puedes crear un botón así

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

se actualiza y evita el almacenamiento en caché, pero estará allí en su página hasta que termine la prueba, luego puede quitarlo. La primera opción es lo mejor.

Tiendo a versionar mi framework y luego aplicar el número de versión a las secuencias de comandos y estilos

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

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

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

window.location.reload(true)parece haber quedado en desuso por el estándar HTML5. Una forma de hacerlo sin usar cadenas de consulta es usar el Clear-Site-Dataencabezado , que parece estar estandarizado .

Debido a que el navegador almacena el mismo enlace, debe agregar un número aleatorio al final de la url. new Date().getTime()generar un número diferente

Simplemente agregue el new Date().getTime()final del enlace como una llamada

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

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