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

私は自分でいくつかの調査を行いましたが、最近のモダンブラウザーで localStorage または sessionStorage オブジェクトを利用して、オブジェクトを一定期間保存することが実現可能であるようです。どちらも限界があります。通常、localStorage および sessionStorage オブジェクトには 5 MB の制限があります。データは、ウィンドウ/タブの存続期間を通じて持続します。今日のブラウザのサポートはそれほど悪くありません (現在 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 がサーバーに返されるため、Cookie の使用も避けます。

Sitepoint は、現在の既存の Web ストレージ API の非常に優れたリソースです: http://www.sitepoint.com/an-overview-of-the-web-storage-api/

于 2013-12-26T20:56:30.293 に答える
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 は必要ないことに注意してください。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 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はそれほど大きくないと思います。

于 2012-12-13T05:01:57.053 に答える