[英]jQuery.getJSON: how to avoid requesting the json-file on every refresh? (caching)
在此示例中,您可以看到生成的HTML列表。 每次刷新时,脚本都会请求数据文件(ajax / test.json)并再次构建列表。
生成的文件“ ajax / test.json”被静态缓存。 但是如何避免每次刷新都请求此文件?
// source: jquery.com
$.getJSON('ajax/test.json', function(data) {
var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.
}).appendTo('body');
});
这不起作用 :
list_data = $.cookie("list_data");
if (list_data == undefined || list_data == "") {
$.getJSON('ajax/test.json', function(data) {
list_data = data;
});
}
var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.
}).appendTo('body');
提前致谢!
如何兑现诺言?
var list_data = localStorage.getItem("list_data"),
def = $.Deferred();
if (!list_data) {
def = $.getJSON('ajax/test.json', function(data) {
list_data = data;
localStorage.setItem("list_data", JSON.stringify(list_data));
});
}else{
list_data = JSON.parse(list_data);
def.resolve();
}
def.done(function() {
var items = [];
$.each(list_data, function(key, val) {
items.push( $('<li />', {id: key, text: val}) );
});
$('<ul/>', {'class': 'my-new-list'}).html(items).appendTo('body');
});
我也只使用本地存储,如果要支持IE7或更低版本,请使用MDN上可用的填充程序!
因为您的代码循环遍历不在$.each
范围内的data
。 代替:
list_data = $.cookie("list_data");
function buildList(data) {
var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.
}).appendTo('body');
}
//if we dont have list data
if (!list_data) {
//request for the data
$.getJSON('ajax/test.json', function(data) {
list_data = data;
//build list using new data
buildList(data);
});
} else {
//or use existing list data
buildList(list_data)
}
请注意,如果您停留在同一页面上,则不需要Cookie-可以将其存储在某个地方的对象中:
window.list_data = data;
如果您需要稍后或刷新页面后检索数据,请使用cookie。 但是您需要对其进行序列化,因为不可能将对象存储在cookie中:
// retrieve
list_data = $.cookie("list_data");
if (list_data) {
// have to de-serialize from string to object
list_data = JSON.parse(list_data);
} else {
// doesn't exist in cookie, make AJAX call
}
// save
$.cookie("list_data", JSON.stringify(data));
您也许可以让浏览器正常地缓存文件,请参阅jQuery ajax文档:
http://api.jquery.com/jQuery.ajax/
jQuery.ajax( settings )
cache
Boolean
Default: true, false for dataType 'script' and 'jsonp'
If set to false, it will force requested pages not to be cached by the browser.
Setting cache to false also appends a query string parameter, "_=[TIMESTAMP]", to the URL.
如果我理解正确,getJson只是ajax调用的抽象,专门用于json。 您应该尝试将其设置为true,这将使浏览器正常缓存。
将其放入Cookie中也可以,但最大大小为4kb。 我假设您的json几乎没有那么大。
我本人做了一些研究,现在在现代浏览器中利用localStorage或sessionStorage对象来存储对象一定时间似乎是可行的。 两者都有极限。 通常,localStorage和sessionStorage对象的限制为5mb。 数据在窗口/标签的整个生命周期中都是持久的。 目前对浏览器的支持还不错( 目前为89% )。
sessionStorage和localStorage共享相同的API。 因此,选择将数据存储在本地的位置仅取决于您的用例。
if (!sessionStorage.myapp) {
var xhr = new XMLHttpRequest(),
results = {}; // Results of xhr request
// ...
// store your xhr results to sessionStorage.
// Both sessionStorage and localStorage can only store strings.
sessionStorage.setItem('myapp', JSON.stringify(results));
}
由于它们的大小限制(4K),并且由于每次交易后cookie都会传回服务器,因此我也避免使用cookie。
对于当前的现有Web存储API,Sitepoint是非常好的资源: http : //www.sitepoint.com/an-overview-of-the-web-storage-api/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.