Question

我有一个小型HTML5（使用jQuery mobile）网络应用程序，可以缓存其文件以便离线使用它们，但有些部分在离线时似乎无法正常工作。

文件缓存正常（我可以在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");
        });
}

Answer 1

我不确定，如果我是对的。但我认为当你离线时，ajax请求总会失败。它不会使用本地缓存的文件。您应该尝试将数据缓存在localStorage中。当ajax请求失败时，回退到localStorage。

Answer 2

好的，这是一个似乎有效的版本，我读了json文件并将其放在localstorage中，然后使用listEvents函数中的localstorage。

当页面加载时，我调用此函数将json添加到localstorage

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

然后这个函数将json（从localstorage）输出到页面，if else包含localstorage不包含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");
   }
}

它似乎工作正常，但我错过了可能导致问题的事情吗？

有更有效的方法吗？

HTML5离线JSON不起作用

2 个答案: