2

ファイルをキャッシュしてオフラインで使用する小さな HTML5 (jQuery モバイルを使用) Web アプリがありますが、オフラインになると一部が機能しないようです。

ファイルは正常にキャッシュされています (Web インスペクターで確認できます) が、jQuery を使用して JSON ファイルをロードするページにアクセスしようとすると、ロードされません。

JSONファイルをロードするための空の関数を作成して（インデックスページがロードされたときに）、それが役立つかどうかを確認しようとしましたが、違いはないようです.

オフラインで作業したくない機能は次のとおりです。

私の質問は次のとおりです。オフラインで動作する必要がありますか、それとも何か不足していますか?

// events page listing start
 function listEvents(data){
 $.getJSON('/files/events.json', {type: "json"},function (data) {
        var output = '';
             for (i in data)
                {
                var headline = data[i].headline;
                var excerpt =  data[i].rawtext;
                output += '<div id="eventsList">';
                output += '<h3>'+headline+'</h3>';  
                output += '<p>'+ excerpt +'<p>';  
                output += '</div>';  
                }
            $("#eventsPageList").html(output).trigger("create");
        });
}
4

2 に答える 2

1

私がこれについて正しいかどうか、私にはよくわかりません。しかし、オフラインの場合、ajax リクエストは常に失敗すると思います。ローカルにキャッシュされたファイルは使用されません。試してみる必要があるのは、データを localStorage にキャッシュすることです。ajax リクエストが失敗すると、localStorage にフォールバックします。

于 2012-10-07T20:53:35.207 に答える
0

これは動作するように見えるバージョンです。json ファイルを読み込んで localstorage に配置し、listEvents 関数で localstorage を使用します。

ページが読み込まれると、この関数を呼び出して json を localstorage に追加します

function  cacheJson(data){
        $.getJSON('/files/events.json',
              {type: "json", cache: true},function (data) {
             localStorage['events'] = JSON.stringify(data);   });
    }

次に、この関数は、(localstorage から) json をページに出力します。localstorage に json が含まれていない場合は if else を使用します。

function listEvents(data){

    if (localStorage.getItem("events") === null) { 
        var output = '';
        output += 'Sorry we have an error';  
        $("#eventsPageList").html(output).trigger("create");
     }
     else {
    data = JSON.parse(localStorage['events']);
      var output = '';
         for (i in data)
            {
            var headline = data[i].headline;
            var excerpt =  data[i].rawtext;
            output += '<div id="eventsList">';
            output += '<h3>'+headline+'</h3>';  
            output += '<p>'+ excerpt +'<p>';  
            output += '</div>';  
            }
        $("#eventsPageList").html(output).trigger("create");
   }
}

正常に動作しているように見えますが、問題を引き起こす可能性のある何かが欠けていますか?

これを行うより効率的な方法はありますか？

于 2012-10-12T13:04:36.330 に答える