jQuery.getJSON：如何避免每次刷新时请求json文件？ （高速缓存）

在此示例中，您可以看到生成的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('
' + val + '
'); }); $('
', { '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('
' + val + '
'); }); $('
', { 'class': 'my-new-list', html: items. }).appendTo('body'); 

提前致谢！

Answer 1

怎么回事？

 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( $('
', {id: key, text: val}) ); }); $('
', {'class': 'my-new-list'}).html(items).appendTo('body'); });​ 

我也只使用本地存储，如果要支持IE7或更低版​​本，请使用MDN上提供的垫片！

Answer 2

因为您的代码循环遍历$.each所在范围内的data 。 代替：

 list_data = $.cookie("list_data"); function buildList(data) { var items = []; $.each(data, function(key, val) { items.push('
' + val + '
'); }); $('
', { '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) } 

Answer 3

请注意，如果您停留在同一页面上，则不需要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)); 

Answer 4

您可以让浏览器正常缓存文件，请参阅jQuery ajax docs：

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不是那么大。

Answer 5

我自己做了一些研究，现在似乎可以在现代浏览器中使用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在每次交易后都会传回服务器。

Sitepoint对于当前现有的Web存储API来说是一个非常好的资源： http ： //www.sitepoint.com/an-overview-of-the-web-storage-api/