varias - localstorage javascript ejemplos

Evitar el almacenamiento en caché del navegador del resultado de la llamada jQuery AJAX

Question

Parece que si cargo contenido dinámico usando $.get() , el resultado se almacena en caché en el navegador.

La adición de algunas cadenas aleatorias en QueryString parece resolver este problema (uso la new Date().toString() ), pero se siente como un hack.

¿Hay alguna otra manera de lograr esto? O, si la única forma de lograrlo es una cadena única, ¿alguna otra sugerencia que no sea la new Date() ?

Answer 1

$ .Get () de JQuery almacenará en caché los resultados. En lugar de

$.get("myurl", myCallback)

Debería usar $ .ajax, que le permitirá desactivar el almacenamiento en caché:

$.ajax({url: "myurl", success: myCallback, cache: false});

Answer 2

¿Qué hay de usar una solicitud POST en lugar de un GET ...? (Lo que deberías de todos modos ...)

Answer 3

Ahora, es fácil hacerlo habilitando / deshabilitando la opción de caché en su solicitud de ajax, de esta manera

$(function () {
    var url = ''your url goes here'';
    $(''#ajaxButton'').click(function (e) {
        $.ajax({
            url: url,
            data: {
                test: ''value''
            },
                cache: true, //cache enabled, false to reverse
                complete: doSomething
            });
        });
    });
    //ToDo after ajax call finishes
    function doSomething(data) {
        console.log(data);
    }
});

Answer 4

Básicamente solo agrega cache:false; en el ajax donde crees que el contenido cambiará a medida que avanza el progreso. Y el lugar donde el contenido no cambiará allí, puede omitir esto. De esta manera obtendrás la nueva respuesta cada vez

Answer 5

Como dijo @Athasach, según los documentos de jQuery, $.ajaxSetup({cache:false}) no funcionará para otras solicitudes que no sean GET y HEAD.

Es mejor enviar un encabezado Cache-Control: no-cache desde su servidor de todos modos. Proporciona una separación de preocupaciones más limpia.

Por supuesto, esto no funcionaría para las URL de servicio que usted no pertenece a su proyecto. En ese caso, podría considerar enviar un proxy del servicio del tercero desde el código del servidor en lugar de llamarlo desde el código del cliente.

Answer 6

La verdadera pregunta es por qué necesita esto para no ser almacenado en caché. Si no se debe almacenar en caché porque cambia todo el tiempo, el servidor debe especificar que no se almacene en caché el recurso. Si solo cambia algunas veces (porque uno de los recursos de los que depende puede cambiar), y si el código del cliente tiene una forma de saberlo, puede agregar un parámetro ficticio a la url que se calcula a partir de algún hash o fecha de última modificación. de esos recursos (eso es lo que hacemos en los recursos de script de Microsoft Ajax para que puedan almacenarse en caché para siempre, pero aún se pueden servir nuevas versiones a medida que aparecen). Si el cliente no puede conocer los cambios, la forma correcta debe ser que el servidor maneje las solicitudes HEAD correctamente y le diga al cliente si debe usar la versión en caché o no. Me parece que añadir un parámetro aleatorio o decirle al cliente que nunca se almacene en caché es incorrecto porque el almacenamiento en caché es una propiedad del recurso del servidor, por lo que debe decidirse del lado del servidor. Otra pregunta que debe hacerse es si este recurso realmente se sirve a través de GET o debe pasar por POST. Esa es una cuestión de semántica, pero también tiene implicaciones de seguridad (hay ataques que funcionan solo si el servidor permite GET). POST no se almacenará en caché.

Answer 7

Lo siguiente evitará que todas las futuras solicitudes de AJAX se almacenen en caché, independientemente del método jQuery que utilice ($ .get, $ .ajax, etc.)

$.ajaxSetup({ cache: false });

Answer 8

Para aquellos de ustedes que usan la opción de cache de $.ajaxSetup() en Safari móvil, parece que es posible que tenga que usar una marca de tiempo para las POST, ya que Safari en caché móvil también. De acuerdo con la documentación en $.ajax() (a la que se le dirige desde $.ajaxSetup() ):

Establecer el caché en falso solo funcionará correctamente con las solicitudes HEAD y GET. Funciona agregando "_ = {marca de tiempo}" a los parámetros GET. El parámetro no es necesario para otros tipos de solicitudes, excepto en IE8 cuando se realiza un POST a una URL que ya ha sido solicitada por un GET.

Así que establecer esa opción por sí solo no te ayudará en el caso que mencioné anteriormente.

Answer 9

Personalmente, creo que el método de cadena de consulta es más confiable que tratar de establecer encabezados en el servidor; no hay garantía de que un proxy o navegador no solo lo guarde en caché de todos modos (algunos navegadores son peores que otros, sin nombrar nombres).

Normalmente uso Math.random() pero no veo nada de malo en usar la fecha (no deberías estar haciendo las solicitudes de AJAX lo suficientemente rápido para obtener el mismo valor dos veces).

Answer 10

Por supuesto, las técnicas de "ruptura de caché" harán el trabajo, pero esto no sucedería en primer lugar si el servidor indicara al cliente que la respuesta no debería ser almacenada en caché. En algunos casos es beneficioso almacenar las respuestas en caché, algunas veces no. Deje que el servidor decida la duración correcta de los datos. Es posible que desee cambiarlo más tarde. Mucho más fácil de hacer desde el servidor que desde muchos lugares diferentes en su código de UI.

Por supuesto, esto no ayuda si no tiene control sobre el servidor.

Answer 11

Si está utilizando .net ASP MVC, deshabilite el almacenamiento en caché en la acción del controlador agregando el siguiente atributo en la función de punto final: [OutputCacheAttribute (VaryByParam = "*", Duration = 0, NoStore = true)]

Answer 12

Si está utilizando IE 9, necesita usar lo siguiente delante de la definición de clase de su controlador:

[OutputCache (NoStore = true, Duration = 0, VaryByParam = "*")]

clase pública TestController: Controlador

Esto evitará que el navegador almacene en caché.

Detalles en este enlace: http://dougwilsonsa.wordpress.com/2011/04/29/disabling-ie9-ajax-response-caching-asp-net-mvc-3-jquery/

En realidad esto resolvió mi problema.

Answer 13

Siguiendo la documentación: http://api.jquery.com/jquery.ajax/

puede utilizar la propiedad de cache con:

$.ajax({
    method: "GET",
    url: "/Home/AddProduct?",
    data: { param1: value1, param2: value2},
    cache: false,
    success: function (result) {
        // TODO
    }
});

Answer 14

Tal vez debería mirar $ .ajax () en su lugar (si está utilizando jQuery, que parece). Eche un vistazo a: http://docs.jquery.com/Ajax/jQuery.ajax#options y la opción "caché".

Otro enfoque sería observar cómo almacenar en caché las cosas en el lado del servidor.

Answer 15

Todas las respuestas aquí dejan una huella en la URL solicitada que aparecerá en los registros de acceso del servidor.

Necesitaba una solución basada en encabezados sin efectos secundarios y descubrí que se puede lograr configurando los encabezados mencionados en ¿Cómo controlar el almacenamiento en caché de páginas web, en todos los navegadores? .

Los resultados, trabajando al menos para Chrome, serían

$.ajax({
   url: url, 
   headers: {
     ''Cache-Control'': ''no-cache, no-store, must-revalidate'', 
     ''Pragma'': ''no-cache'', 
     ''Expires'': ''0''
   }
});

Answer 16

Una pequeña adición a las excelentes respuestas dadas: si está ejecutando una solución de copia de seguridad sin ajax para usuarios sin javascript, tendrá que corregir correctamente los encabezados del lado del servidor. Esto no es imposible, aunque entiendo a los que lo abandonan;)

Estoy seguro de que hay otra pregunta sobre SO que le dará el conjunto completo de encabezados que son apropiados. No estoy completamente convencido de que la respuesta de los ratones cubre todas las bases al 100%.

Answer 17

Utilizo new Date().getTime() , que evitará colisiones a menos que tenga varias solicitudes en el mismo milisegundo:

$.get(''/getdata?_='' + new Date().getTime(), function(data) {
    console.log(data); 
});

Edit: Esta respuesta tiene varios años. Todavía funciona (por lo tanto, no lo he eliminado), pero hay formas mejores / más limpias de lograrlo ahora . Mi preferencia es para this método, pero this respuesta también es útil si desea deshabilitar el almacenamiento en caché para cada solicitud durante la vida útil de una página.

Answer 18

anexar Math.random () a la url de solicitud

Answer 19

otra forma es no proporcionar encabezados de caché desde el lado del servidor en el código que genera la respuesta a la llamada ajax:

response.setHeader( "Pragma", "no-cache" );
response.setHeader( "Cache-Control", "no-cache" );
response.setDateHeader( "Expires", 0 );

Answer 20

Ajax Caching de Internet Explorer: ¿Qué vas a hacer al respecto? sugiere tres enfoques:

1. Agregue un token de almacenamiento en caché a la cadena de consulta, como? Date = [timestamp]. En jQuery e YUI puedes decirles que hagan esto automáticamente.
2. Use POST en lugar de un GET
3. Envía un encabezado de respuesta HTTP que prohíba específicamente que los navegadores lo almacenen en caché.