Web-applikationer - offline

En af mine venner, Tomas Krag, spurgte mig fornylig om jeg havde styr på HTML 5. Mit typiske svar er: ja, men giv mig lige et par dage. Grunden til at han spurgte var, at HTML 5 har mulighed for at lade web-applikationer gemme data lokalt i browseren mellem sessioner. Ikke bare i form af cookies, men rigtige data. Tricket ved at bruge local storage, kan din web-applikation køre videre når du er offline. Det kræver naturligvis at du skriver det meste af din web-applikation i Javascript.

Tomas ved godt at jeg skriver en masse i Javascript - derfor spurgte han mig og ikke en anden ven. HTML 5 understøttes ikke af alle web-browsere, og ingen web-browser har implementeret al HTML 5. Heldigvis skulle Drupal bruges som CMS - og Drupal bruger jQuery som Javascript framework. En løsning til alle browsere med et jQuery-modul kunne derfor bruges.

Modulet jStore er et jQuery som netop giver web-udvikleren mulighed for at bruge local storage. I de tilfælde hvor HTML 5 er implementeret, bruger jStore det, men andre tilfælde kan Flash bruges eller noget helt tredje. i jStore-terminologi er er tale om forskellige storage engines. Alt i alt er alle browsere understøttet.

Det er ikke så svært at bruge jStore. Du skal naturligvis inkludere jQuery og jStore i dine HTML-sider, men så er du også klar.

Først skal jStore initialiseres. Du kan overlade valget af storage engine til jStore. En enkel initialisering kunne være:

jQuery(document).ready(function() {
console.log("Initializing storage");
jQuery.jStore.ready(function(engine) {
engine.ready(function() {
console.log("Engine ready: "+engine.jri);
});
});
jQuery.jStore.fail(function(engine) {
console.log("Engine failed: "+engine.jri);
});
jQuery(function() {
console.log("Loading");
jQuery.jStore.load();
console.log("Ready");
});
});

OK, der er et par callback-funktioner - men sådan er moderne Javascipt.

Med jStore får du et fælles API til alle engines, og derfor bliver det let at gemme og hente data i local storage.

function ru_save() {
console.log("About to save");
var fields = $(":input").serializeArray();
jQuery.each(fields, function(i, field) {
console.log("Saving "+i+" as "+field.value);
jQuery.jStore.CurrentEngine.set("ru_"+i, field.value);
});
}


function ru_load() {
console.log("About to load");
var fields = $(":input").serializeArray();
jQuery.each(fields, function(i, field) {
console.log("Loading "+i);
var value = jQuery.jStore.CurrentEngine.get("ru_"+i);
jQuery('#'+field.name).val(value);
console.log("Value is "+value);
});
}

De to funktioner hhv. gemmer og henter data som passer med felterne i en HTML-form

Her til slut vil jeg lige reklamere lidt for mig selv. Den 6. marts 2010 giver jeg en 2-timers tutorial om Javascript ved Open Source Days 2010. Efter min tutorial vil Tobias Oetiker give en tutorial om jQuery. Så er du udvikler som skal til at begynde at skrive i Javascript, tror jeg at du vil få stor udbytte af den lørdag.