pagina - Almacenamiento en caché de una respuesta jquery ajax en javascript/navegador
llamar funcion javascript html sin evento (5)
Me gustaría habilitar el almacenamiento en caché de una respuesta ajax en javascript / navegador.
De los documentos jquery.ajax :
De forma predeterminada, las solicitudes siempre se emiten, pero el navegador puede mostrar los resultados de su caché. Para no permitir el uso de los resultados almacenados en la memoria caché, configure la memoria caché en falso. Para hacer que la solicitud informe una falla si el activo no se ha modificado desde la última solicitud, establezca ifModified en verdadero.
Sin embargo, ninguna de estas direcciones forzar el almacenamiento en caché.
Motivación: Quiero poner $.ajax({...}) llamadas en mis funciones de inicialización, algunas de las cuales solicitan la misma URL. A veces necesito llamar a una de estas funciones de inicialización, a veces llamo a varias.
Por lo tanto, quiero minimizar las solicitudes al servidor si esa URL particular ya se ha cargado.
Podría lanzar mi propia solución (¡con alguna dificultad!), Pero me gustaría saber si existe una forma estándar de hacerlo.
Estaba buscando el almacenamiento en caché de mi aplicación de teléfono y encontré la respuesta de @TecHunter, que es genial, pero está hecho usando localCache .
Encontré y llegué a saber que localStorage es otra alternativa para almacenar en caché los datos devueltos por una llamada ajax. Entonces, creé una demostración usando localStorage que ayudará a otros que quieran usar localStorage lugar de localCache para el almacenamiento en caché.
Llamada Ajax:
$.ajax({
type: "POST",
dataType: ''json'',
contentType: "application/json; charset=utf-8",
url: url,
data: ''{"Id":"'' + Id + ''"}'',
cache: true, //It must "true" if you want to cache else "false"
//async: false,
success: function (data) {
var resData = JSON.parse(data);
var Info = resData.Info;
if (Info) {
customerName = Info.FirstName;
}
},
error: function (xhr, textStatus, error) {
alert("Error Happened!");
}
});
Para almacenar datos en localStorage:
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
if (options.cache) {
var success = originalOptions.success || $.noop,
url = originalOptions.url;
options.cache = false; //remove jQuery cache as we have our own localStorage
options.beforeSend = function () {
if (localStorage.getItem(url)) {
success(localStorage.getItem(url));
return false;
}
return true;
};
options.success = function (data, textStatus) {
var responseData = JSON.stringify(data.responseJSON);
localStorage.setItem(url, responseData);
if ($.isFunction(success)) success(responseJSON); //call back to original ajax call
};
}
});
Si desea eliminar localStorage, use la siguiente declaración donde desee:
localStorage.removeItem("Info");
Espero que ayude a los demás!
Si entendí tu pregunta, aquí está la solución:
$.ajaxSetup({ cache: true});
y para llamadas específicas
$.ajax({
url: ...,
type: "GET",
cache: false,
...
});
Si desea opuesto (caché para llamadas específicas), puede establecer falso al comienzo y verdadero para llamadas específicas.
Todos los navegadores modernos te proporcionan apis de almacenamiento. Puede usarlos (localStorage o sessionStorage) para guardar sus datos.
Todo lo que tiene que hacer es después de recibir la respuesta almacenarlo en el almacenamiento del navegador. Luego, la próxima vez que encuentre la misma llamada, busque si ya se guardó la respuesta. En caso afirmativo, devuelva la respuesta desde allí; si no, haga una nueva llamada.
Smartjax complemento Smartjax también hace cosas similares; pero como su requisito es simplemente guardar la respuesta de llamada, puede escribir su código dentro de su función jQuery ajax success para guardar la respuesta. Y antes de hacer una llamada solo verifica si la respuesta ya está guardada.
Una vieja pregunta, pero mi solución es un poco diferente.
Estaba escribiendo una aplicación web de una sola página que hacía constantemente llamadas ajax activadas por el usuario, y para hacerlo aún más difícil requería bibliotecas que utilizaran métodos distintos de jquery (como dojo, xhr nativo, etc.). Escribí un complemento para una de mis propias bibliotecas para almacenar en caché las solicitudes ajax de la manera más eficiente posible de una manera que funcionara en todos los navegadores principales, independientemente de las bibliotecas que se usaban para hacer la llamada ajax.
La solución utiliza jSQL (escrito por mí, una implementación SQL persistente del lado del cliente escrita en javascript que usa indexeddb y otros métodos de almacenamiento dom), y se incluye con otra biblioteca llamada XHRCreep (escrita por mí) que es una reescritura completa de el objeto XHR nativo.
Para implementar todo lo que necesita hacer es incluir el complemento en su página, que está aquí .
Hay dos opciones:
jSQL.xhrCache.max_time = 60;
Establece la edad máxima en minutos. cualquier respuesta almacenada en caché que sea anterior a esto se vuelve a solicitar. El valor predeterminado es 1 hora.
jSQL.xhrCache.logging = true;
Cuando se establece en verdadero, las llamadas XHR simuladas se mostrarán en la consola para la depuración.
Puede borrar la caché en cualquier página dada a través de
jSQL.tables = {}; jSQL.persist();
cache:true solo funciona con la solicitud GET y HEAD.
Podrías rodar tu propia solución como dijiste con algo parecido a esto:
var localCache = {
data: {},
remove: function (url) {
delete localCache.data[url];
},
exist: function (url) {
return localCache.data.hasOwnProperty(url) && localCache.data[url] !== null;
},
get: function (url) {
console.log(''Getting in cache for url'' + url);
return localCache.data[url];
},
set: function (url, cachedData, callback) {
localCache.remove(url);
localCache.data[url] = cachedData;
if ($.isFunction(callback)) callback(cachedData);
}
};
$(function () {
var url = ''/echo/jsonp/'';
$(''#ajaxButton'').click(function (e) {
$.ajax({
url: url,
data: {
test: ''value''
},
cache: true,
beforeSend: function () {
if (localCache.exist(url)) {
doSomething(localCache.get(url));
return false;
}
return true;
},
complete: function (jqXHR, textStatus) {
localCache.set(url, jqXHR, doSomething);
}
});
});
});
function doSomething(data) {
console.log(data);
}
EDITAR: a medida que esta publicación se vuelve popular, aquí hay una respuesta aún mejor para aquellos que quieren administrar el caché de tiempo de espera y tampoco tienes que molestarte con todo el lío en $.ajax() ya que utilizo $.ajaxPrefilter() . Ahora solo establecer {cache: true} es suficiente para manejar el caché correctamente:
var localCache = {
/**
* timeout for cache in millis
* @type {number}
*/
timeout: 30000,
/**
* @type {{_: number, data: {}}}
**/
data: {},
remove: function (url) {
delete localCache.data[url];
},
exist: function (url) {
return !!localCache.data[url] && ((new Date().getTime() - localCache.data[url]._) < localCache.timeout);
},
get: function (url) {
console.log(''Getting in cache for url'' + url);
return localCache.data[url].data;
},
set: function (url, cachedData, callback) {
localCache.remove(url);
localCache.data[url] = {
_: new Date().getTime(),
data: cachedData
};
if ($.isFunction(callback)) callback(cachedData);
}
};
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
if (options.cache) {
var complete = originalOptions.complete || $.noop,
url = originalOptions.url;
//remove jQuery cache as we have our own localCache
options.cache = false;
options.beforeSend = function () {
if (localCache.exist(url)) {
complete(localCache.get(url));
return false;
}
return true;
};
options.complete = function (data, textStatus) {
localCache.set(url, data, complete);
};
}
});
$(function () {
var url = ''/echo/jsonp/'';
$(''#ajaxButton'').click(function (e) {
$.ajax({
url: url,
data: {
test: ''value''
},
cache: true,
complete: doSomething
});
});
});
function doSomething(data) {
console.log(data);
}
Y el violín aquí CUIDADO, no funciona con $. Diferido
Aquí hay una implementación funcional pero defectuosa que funciona con diferido:
var localCache = {
/**
* timeout for cache in millis
* @type {number}
*/
timeout: 30000,
/**
* @type {{_: number, data: {}}}
**/
data: {},
remove: function (url) {
delete localCache.data[url];
},
exist: function (url) {
return !!localCache.data[url] && ((new Date().getTime() - localCache.data[url]._) < localCache.timeout);
},
get: function (url) {
console.log(''Getting in cache for url'' + url);
return localCache.data[url].data;
},
set: function (url, cachedData, callback) {
localCache.remove(url);
localCache.data[url] = {
_: new Date().getTime(),
data: cachedData
};
if ($.isFunction(callback)) callback(cachedData);
}
};
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
if (options.cache) {
//Here is our identifier for the cache. Maybe have a better, safer ID (it depends on the object string representation here) ?
// on $.ajax call we could also set an ID in originalOptions
var id = originalOptions.url+ JSON.stringify(originalOptions.data);
options.cache = false;
options.beforeSend = function () {
if (!localCache.exist(id)) {
jqXHR.promise().done(function (data, textStatus) {
localCache.set(id, data);
});
}
return true;
};
}
});
$.ajaxTransport("+*", function (options, originalOptions, jqXHR, headers, completeCallback) {
//same here, careful because options.url has already been through jQuery processing
var id = originalOptions.url+ JSON.stringify(originalOptions.data);
options.cache = false;
if (localCache.exist(id)) {
return {
send: function (headers, completeCallback) {
completeCallback(200, "OK", localCache.get(id));
},
abort: function () {
/* abort code, nothing needed here I guess... */
}
};
}
});
$(function () {
var url = ''/echo/jsonp/'';
$(''#ajaxButton'').click(function (e) {
$.ajax({
url: url,
data: {
test: ''value''
},
cache: true
}).done(function (data, status, jq) {
console.debug({
data: data,
status: status,
jqXHR: jq
});
});
});
});
Fiddle AQUÍ Algunos problemas, nuestra ID de caché depende de la representación del objeto jSON2 lib JSON.
Utilice la vista de consola (F12) o FireBug para ver algunos registros generados por la memoria caché.