Borrar el caché en JavaScript


179

¿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


55
Esto me confunde: "Implementamos el último código de JavaScript pero no pudimos obtener el último código de JavaScript"
instancia de mí

14
Supongo que quiere decir, cómo obligar a los navegadores de los clientes a usar su última versión de javascript y no su versión en caché, en ese caso necesita la respuesta de Greg. Si quieres saber cómo hacerlo en tu propio navegador, es la respuesta de David Johnstone.
Benjol


44
Un enfoque común es adjuntar ?version=xxxa sus archivos vinculados JS a través de un paso de compilación. Cada nueva compilación solicitará una nueva versión del archivo JS.
Juan Mendes

1
@JuanMendes Esto no siempre funciona. Este mismo paso se sugiere cuando las personas tienen problemas para intentar ver el último favicon. Simplemente no está garantizado para trabajar.
uSeRnAmEhAhAhAhAhA

Respuestas:


202

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.


66
¡Wow gracias! Esto también funciona bien para una caché de aplicaciones HTML5 cargada desde un archivo cache.manifest. Tenía un manifiesto antiguo que no se eliminaba de la memoria, por lo que un navegador que lo tenía en caché simplemente no mostraba archivos más nuevos. Escribí esto en la consola de JavaScript y funcionó bien. ¡Gracias!
JayCrossler

2
pero acelerando cambiando el nombre del archivo ... ¿eso no hará que mantenga todas las versiones anteriores en su lugar? de lo contrario, obtendrá muchos intentos fallidos de los motores de búsqueda y qué no leer las versiones anteriores (o imágenes marcadas / vinculadas)
Rodolfo

1
¿Cómo es que yo no pensé en eso, el tanque que
osdamv

1
¿Es esto lo mismo que el usuario hace clic en el botón Actualizar?
GMsoF

2
@Manuel Solo deshabilitará el acceso a la página desde el caché de la url exacta a la que llamó location.reload (true). Nunca borra la página original del caché, ya que simplemente agrega una marca de tiempo a la nueva solicitud, y si hay otras llamadas realizadas de forma asíncrona por esta página, esas solicitudes NO tendrán sus comportamientos de almacenamiento en caché deshabilitados. P.ej. Si actualiza una página con reload (true) que carga algunos html, y esa página tiene un script que realiza una segunda llamada ajax para que se muestre más html en la misma página, la segunda solicitud no tendrá su caché deshabilitado.
J. Schei

114

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


9
Sin embargo, tenga en cuenta que muchos servidores proxy no almacenan en caché un archivo cuando tiene una cadena de consulta. Ver respuesta de Kevin Hakanson .
chiborg

44
¿Cómo puedo borrar el caché cuando todo el HTML ha sido almacenado en caché? No afectará incluso cuando se agregue el número de versión debido a HTML en caché. Por favor ayuda
Nandakumar

Si no puedo borrar un elemento de caché, ¿por qué MDN dice que puedo? ¿Qué me estoy perdiendo? Intenté lo que dice MDN pero no tuve suerte.
Sanađошƒаӽ

41

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.


¿Qué hace el n = 1?
KyelJmD

no hace nada excepto ser algo diferente. podría ser? 12345 o? Kyle
Oneezy

¿Entonces también se debe cambiar el nombre del archivo? ¿O solo la ruta src que necesita ser cambiada?
Fred A

20

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>

3
¿Puedo verificar que entiendo esto correctamente ?: Con la opción 1, cuando cambia el archivo, cambia el hash de la suma de comprobación md5, que luego cambia la url. El navegador ve una nueva url e inicia una nueva carga del archivo. El servidor ignora los datos de obtención adjuntos a la url. Si ese es el caso, bastante astuto.
Colin Brogan

1
Además, ¿MD5-ing es un procesador de archivos completo intensivo? Estoy considerando hacer esto para cualquier archivo css y js, pero odiaría ver un éxito en la velocidad del servidor debido a esto.
Colin Brogan

2
Usar una suma de verificación es una buena idea, pero debe hacerse correctamente. Calcularlo cada solicitud para cada archivo afectará significativamente su rendimiento. Querystring no es bueno para el almacenamiento en caché también, vea otras respuestas. El uso correcto es agregar una suma de verificación (¿parte de?) O un número de versión al nombre del archivo y usar este nuevo nombre en su lugar (puede usar un script de compilación para hacer esto automáticamente en la implementación). Ver gruñido , rev y usemin .
Frizi

10

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>

1
hola, ¿qué significa "v" y "token"?
GMsoF

44
@GMsoF que es solo un parámetro de obtención adicional que se usa (en este caso) para decirle al navegador que es un archivo "diferente". Para que el navegador descarte la versión en caché y cargue esta en su lugar. Esto se usa a menudo con la "última fecha de modificación" de un archivo. Espero que esto tenga sentido ;-)
Jelmer

6

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

1
proporcione alguna explicación sobre su solución
Gabriel Espinoza

@GabrielEspinoza vuelve a cargar los archivos mediante javascript, lo que hace que las cachés se actualicen.
Neo Morina

6

intenta usar esto

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

A esto:

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

5

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.).


5

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


4

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.


1
Me gusta este enfoque, pero ¿tal vez lo estoy implementando en el área incorrecta? ¿Alguien sabe dónde agregar esto en una configuración de WordPress? Lo agregué al archivo functions.php, con enlaces directos a los archivos JavaScript y CSS, pero aún así tuve que hacer una recarga dura para que los cambios se noten.
flipflopmedia

1
Lo que debe hacer es, en su directorio principal de WordPress html, editar su index.php para llamar o ejecutar el comando Touch () en los archivos que necesita actualizar y descargar. Tuve problemas con pequeñas fotos y archivos js que se atascaron en la memoria caché. Intenté la mayoría de los métodos descritos para liberarlos de la memoria, pero la mejor manera es cargar uno actual y correcto. Puede lograrlo simplemente haciendo "Touch Thing", ya que no modifica nada en el archivo, solo actualiza la fecha y hora actuales para que su navegador piense que es otra versión del archivo y el problema solucionado. Funciona en la mayoría de los navegadores
Luis H Cabrejo

3

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

3

Si está utilizando php puede hacer:

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

66
Esta pregunta no solo se hizo hace cuatro años, sino que también tuvo una mejor respuesta, incluso si no fue aceptada.

44
Además, este método volvería a descargar el archivo cada vez, independientemente del número de revisión real o los cambios realizados en el archivo, lo que deshabilitaría por completo el almacenamiento en caché por completo.
Antti29

2

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


¿No es esto solo parte de la API de Service Workers '?
BanksySan

@BanksySan de los documentos de MDN:You don't have to use it in conjunction with service workers, even though it is defined in the service worker spec.
Madbreaks

2

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


2

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.


1

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

3
OP no mencionó Coldfusion.
marctrem

@VijayDev 404 para su enlace
smarber

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

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


1
Alguna explicación por favor, ¿qué es "llamada" en el código anterior?
Anand Rockzz

@AnandRockzz no es posible, la API de caché solo es un nuevo tipo de caché que se puede administrar con javascipt, por lo que para eliminar algo de allí, lo ha guardado antes de ver developer.mozilla.org/en-US/docs/ Web / API / caché
John Balvin Arias


0

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


Bienvenido a SO! Tu respuesta no está clara. Por favor edítelo. Este tipo de respuestas, basadas en el enlace, deben comentarse en caso de que el enlace desaparezca.
David García Bodego
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.