jQuery.getJSON：如何避免每次刷新時都請求json文件？ （正在緩存）

Question

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

提前致謝！

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( $('<li />', {id: key, text: val}) );
    });

    $('<ul/>', {'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('<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)
}

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文檔：

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。

對於當前的現有Web存儲API，Sitepoint是非常好的資源： http : //www.sitepoint.com/an-overview-of-the-web-storage-api/