HTML5 offline JSON doesn't work

Question

I have a small HTML5 (using jQuery mobile) web app that caches its files to use them offline, however some parts don't seem to work once it's offline.

The files are cached OK (I can see them in the web inspector) but when I try to visit a page that uses jQuery to load a JSON file it doesn't load.

I tried creating an empty function to load the JSON files (when the index page is loaded) to see if that would help but it doesn't seem to make a difference.

Here's the function that doesn't want to work offline.

My question is: should it work offline or am I missing something?

// 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

I'm not really sure, if i'm right about this. But i think an ajax request will always fail when you are offline. It won't use the locally cached file. What you should try is, to cache the data in localStorage. When the ajax request fails, fallback to localStorage.

Answer 2

OK here's a version which seems to work, I read the json file and place it in localstorage then use the localstorage in the listEvents function.

When the page loads I call this function to add the json to localstorage

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

Then this function to output the json (from localstorage) to the page, with an if else incase the localstorage doesn't contain the 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");
   }
}

It seems to work ok but am I missing something that could cause issues?

Is there a more efficient way of doing this?