CODEWITHSUNDEEP
jqueryajaxcordovacachinglocal-storage
LeeTee
LeeTee

Reputation: 6601

App development - Caching JSON files when online - AJAX

I've built an app in Cordova which will be used on IOS at first but will eventually need to work on Android and on desktop. I need to request JSON files when online and cache the JSON for use when offline. I am using Cordova and have the online / offline event listener working.

This seems to work with the simplistic code below:

 var cache = JSON.parse(localStorage.getItem('cache'));

    if (!cache) $.getJSON('http://example.com/JSON/', function (data) {
        cache= localStorage.setItem('cache', JSON.stringify(data));

    });

However the app is a little more complex than than, making dynamic AJAX calls and I am struggling to know how to handle caching of dynamic URLS which display different data depending on the category. After some research into dynamic variables I came up with the below code, however this does not work as the same cached file is used for all categories within the App and when I print the 'cache' var to console, I get NULL.

var cat = (this.getAttribute('data-cat'));

                //get cached JSON
                var cache = {};
                cache['category-' + cat] = JSON.parse(localStorage.getItem(cache['category-' + cat]));      

                //check if online and not cached - could make this more complex and only do the Ajax call daily
                if((online===true)&&(!cache['category-' + cat])){
                   //get JSON
                   $.getJSON(baseurl+'/wp-json/app/v2/files?filter[category]='+cat+'&per_page=100', function(jd) {
                   //cache JSON
                   var cache = {};
                   cache['category-' + cat] = localStorage.setItem(cache['category-' + cat], JSON.stringify(jd));
                   cache.date = currentTimestamp;
                   });
                } else if((online===false)&&(!cache['category-' + cat])){
                    alert('There are no cached files.  You need to be online.');
                }
console.log( JSON.parse( localStorage.getItem( 'cache' ) ) );

Can anyone see what I doing wrong?

Upvotes: 0

Views: 247

Answers (1)

Marcus Vilete
Marcus Vilete

Reputation: 220

Instead of:

localStorage.getItem(cache['category-' + cat]);
localStorage.setItem(cache['category-' + cat], JSON.stringify(jd));

Try: 

localStorage.getItem('category-' + cat);
localStorage.setItem('category-' + cat, JSON.stringify(jd));

EDIT:

I modified your code and tested at my browser here, i think this is what you need:

//var cat = (this.getAttribute('data-cat'));
var cat = 'myCat';
var online = true;
//get cached JSON
var cache = {};
cache['category-' + cat] = JSON.parse(localStorage.getItem('category-' + cat));

//check if online and not cached - could make this more complex and only do the Ajax call daily
if ((online === true) && (!cache['category-' + cat])) {
  //get JSON
  //$.getJSON(baseurl + '/wp-json/app/v2/files?filter[category]=' + cat + '&per_page=100', function (jd) {
  //mock the 'jd' result from ajax
  var jd = {
    prop1: "value1",
    prop2: "value2"
  };
  //cache JSON
  //var cache = {};
  cache['category-' + cat] = jd
  localStorage.setItem('category-' + cat, JSON.stringify(jd));
  //cache.date = currentTimestamp;
  cache.date = new Date();
  //});
} else if ((online === false) && (!cache['category-' + cat])) {
  alert('There are no cached files.  You need to be online.');
}
console.log(JSON.parse(localStorage.getItem('category-' + cat)));

Note: Ajax is asynchronous, so console.log at the end may not catch what you are looking for.

Upvotes: 1

Related Questions