HTML5 오프라인 JSON이 작동하지 않습니다.

Question

오프라인으로 사용하기 위해 파일을 캐시하는 작은 HTML5 (jQuery 모바일 사용) 웹 앱이 있지만 오프라인 일 때 일부 부품이 작동하지 않는 것 같습니다.

파일이 캐시됩니다. (웹 속성에서 볼 수 있습니다.)하지만 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"); 
     }); 
} 

Answer 1

나는이 사실에 대해 잘 모르겠다. 그러나 나는 당신이 오프라인 일 때 아약스 요청은 항상 실패 할 것이라고 생각한다. 로컬 캐시 파일은 사용하지 않습니다. 시도해야 할 것은 localStorage에서 데이터를 캐시하는 것입니다. ajax 요청이 실패하면 localStorage로 대체합니다.

Answer 2

OK 버전입니다. json 파일을 읽고 localstorage에 넣은 다음 listEvents 함수에서 localstorage를 사용하십시오.

페이지가로드가 나는 로컬 스토리지하지 않는 넣다는 IF 다른 사람과 함께 페이지에 다음

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

출력이 기능 (로컬 스토리지에서) json으로 로컬 스토리지하기 위해 JSON을 추가하려면이 함수를 호출 할 때 json을 포함하십시오.

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"); 
    } 
} 

문제가 될 수있는 사항이 누락 되었습니까?

더 효율적인 방법이 있습니까?