App-Entwicklung - Caching JSON-Dateien, wenn online - AJAX

Question

Ich habe eine App in Cordova gebaut, die auf IOS zunächst verwendet wird, aber irgendwann auf Android und auf dem Desktop arbeiten muss. Ich muss JSON-Dateien anfordern, wenn online und Zwischenspeichern des JSON für die Verwendung offline. Ich verwende Cordova und lasse den Online/Offline-Ereignis-Listener arbeiten.

Dies mit dem simplen Code scheint unten zu arbeiten:

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

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

    }); 

jedoch die App ein wenig komplexer ist, als als, so dass dynamische AJAX Anrufe und ich kämpfe, um zu wissen, wie das Caching von dynamischen URLs zu handhaben, die zeigen abhängig von der Kategorie unterschiedliche Daten an. Nach einigen Nachforschungen über dynamische Variablen habe ich den folgenden Code gefunden, aber das funktioniert nicht, da die gleiche zwischengespeicherte Datei für alle Kategorien innerhalb der App verwendet wird und wenn ich die Variable 'cache' auf die Konsole drucke, bekomme ich 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'))); 

Kann jemand sehen, was ich falsch mache?

Answer 1

Statt:

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

Versuchen:

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

---

EDIT:

ich Ihren Code geändert und an meinem Browser hier getestet, ich denke, das ist, was Sie brauchen :

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

Hinweis: Ajax ist asynchron, daher kann console.log am Ende nicht das bekommen, was Sie suchen.