4

在本例中，您可以看到生成的 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');

提前致谢！

4

5 回答 5

7

怎么许诺？

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上提供的 shim ！

于 2012-12-13T04:54:50.400 回答
1

因为您的代码循环data不在您所在的范围内$.each。反而：

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)
}
于 2012-12-13T04:44:42.360 回答
1

请注意，如果您停留在同一页面上，则不需要 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));
于 2012-12-13T04:46:15.163 回答
1

您也许可以让浏览器正常缓存文件，请参阅 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 没有那么大。

于 2012-12-13T05:01:57.053 回答
1

我自己做了一些研究，现在使用现代浏览器中的 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));
}

我也会避免使用 cookie，因为它们的大小限制 (4K)，而且因为 cookie 在每次交易后都会传回服务器。

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

于 2013-12-26T20:56:30.293 回答