我想在javascript/浏览器中启用ajax响应的缓存。
默认情况下,总是发出请求,但浏览器可能会从其缓存中提供结果。要禁止使用缓存的结果,请将cache设置为false。若要使请求在自上次请求以来未修改资产的情况下报告失败,请将ifModified设置为true。
但是,这两种方法都不会强制缓存。
动机:我想把$.ajax({...})
调用放在我的初始化函数中,其中一些函数请求相同的url。有时我需要调用这些初始化函数中的一个,有时我调用几个。
因此,如果已经加载了特定的url,我希望最小化对服务器的请求。
我可以推出我自己的解决方案(有一些困难!),但我想知道是否有标准的方法来做到这一点。
发布于 2013-06-14 16:45:15
cache:true
仅适用于GET和HEAD请求。
正如您所说的,您可以使用以下内容推出自己的解决方案:
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);
}
编辑:随着这篇文章变得流行起来,对于那些想要管理超时缓存的人来说,这是一个更好的答案,而且你也不必因为我使用$.ajaxPrefilter()而烦恼于$.ajax()中的所有混乱。现在,只需设置{cache: true}
就足以正确处理缓存:
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);
}
And the fiddle here 小心,不使用$.Deferred
下面是一个可以正常工作但有缺陷的实现,它使用了deferred:
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
});
});
});
});
对于一些问题,我们的缓存ID依赖于json2 lib JSON对象表示。
使用控制台视图(F12)或FireBug查看缓存生成的一些日志。
发布于 2015-06-05 13:55:12
我正在为我的phonegap应用程序存储寻找缓存,我找到了@TecHunter的答案,这很棒,但使用的是localCache
。
我发现并逐渐了解到,localStorage是缓存ajax调用返回的数据的另一种选择。因此,我使用localStorage
创建了一个演示,它将帮助其他可能想要使用localStorage
而不是localCache
进行缓存的人。
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!");
}
});
将数据存储到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
};
}
});
如果您想删除localStorage,请在您想要的任何地方使用以下语句:
localStorage.removeItem("Info");
希望它能帮助其他人!
发布于 2015-03-15 03:50:32
所有现代浏览器都为您提供了存储apis。您可以使用它们(localStorage或sessionStorage)保存数据。
您所要做的就是在收到响应后将其存储到浏览器存储中。然后,下次您找到相同的呼叫时,搜索响应是否已保存。如果是,则从那里返回响应;如果不是,则进行新的调用。
Smartjax插件也做类似的事情;但是因为您的需求只是保存调用响应,所以您可以在jQuery ajax成功函数中编写代码来保存响应。在进行调用之前,只需检查响应是否已保存。
https://stackoverflow.com/questions/17104265
复制相似问题