HTML5: Offline opslag met local storage

Dit is het tweede artikel over HTML5. HTML5 heeft verschillende methoden om lokaal en offline elementen op te slaan. De meest simpele is localStorage. Hiermee kunnen simpele “sleutel”-”waarde” Paren worden opgeslagen zonder database, zonder plugins, zonder server.

We kunnen niet altijd online zijn

We kunnen al een groot deel van de dag continue online zijn. Door draadloze verbindingen als wifi,(3)G, UMTS etc kunnen we ten alle tijden met verschillende apparaten gebruik maken van het internet. Hierdoor wordt het aantrekkelijk om web-applicaties te gebruiken. Deze hoeven niet op een apparaat geïnstalleerd te worden en hebben alleen een browser nodig. Toch kunnen we niet altijd aaneengesloten online zijn, dit was het grote struikelblok voor webapplicaties. In HTML5 zijn verschillende technieken beschikbaar om lokaal (tijdelijk) data op te slaan wanneer de verbinding er even niet is namelijk: sessionStorage, databaseStorage en localStorage

localStorage de simpele opslag

Als je alleen één of meerdere waarden op wilt slaan is de localStorage methode voldoende. Hiermee kan er binnen een website een sleutel met waarde worden opgeslagen. Zolang de gebruiker op de website is, is deze informatie beschikbaar. Ook als de gebruiker later terugkomt op dezelfde site zal de informatie beschikbaar zijn. Een goede methode om instellingen op te slaan. een voorbeeld is bijvoorbeeld het wegschrijven van iemands gepersonaliseerde instellingen zoals kleur, de gebruikte lettergrote of naam.

Waarde wegschrijven

Een waarde wegschrijven in localStorage is eenvoudig, mits je browser localStorage ondersteund. Met 1 regel code binnen JavaScript staat er een waarde opgeslagen:

localStorage.setItem("lettergrootte", "12px");

Op deze manier wordt er in de lokale opslag een waarde van 12px aan de sleutel “lettergrootte” gegeven. Dit moet natuurlijk wel binnen

LocalStorage elementen ophalen.

Ook het ophalen van een waarde om deze verder te gebruiken is te doen met 1 regel code.

var lettergrootte = localStorage.getItem("lettergrootte");
document.body.fontSize = lettergrootte;

Zo wijs je de variable lettergrootte in JavaScript de gezette 12px toe. Dit kan dan bijvoorbeeld zoals hierboven gebruikt worden om de lettergrootte van een pagina te zetten naar de wensen die eerder zijn ingevuld.

Waarden verwijderen

Natuurlijk kunnen er ook waarden uit de localStorage worden verwijderd.

localStorage.remove('lettergrootte');

om de sleutel en waarde van “lettergrootte te verwijderen. Om alle waarden van de website te verwijderen kan er gebruik gemaakt worden van;

localStorage.clear();

 

Een volledig voorbeeld

Hier vind je een voorbeeld waarbij waarden gezet, opgehaald en verwijderd kunnen worden. Als je naar de code kijkt zie je al snel dat de functies eenvoudig en begrijpelijk zijn;

     function doSetItem() {
       var name = document.forms.editor.name.value;
       var data = document.forms.editor.data.value;
       localStorage.setItem(name, data);
       doShowAll();
     }

     function doGetItem() {
       var name = document.forms.editor.name.value;
       document.forms.editor.data.value = localStorage.getItem(name);
       doShowAll();
     }

     function doRemoveItem() {
       var name = document.forms.editor.name.value;
       document.forms.editor.data.value = localStorage.removeItem(name);
       doShowAll();
     }

     function doClear() {
       localStorage.clear();
       doShowAll();
     }

     function doShowAll() {
       var key = "";
       var pairs = "<tr><th>Name</th><th>Value</th></tr>\n";
       var i=0;
       for (i=0; i<=localStorage.length-1; i++) {
         key = localStorage.key(i);
         pairs += "<tr><td>"+key+"</td><td>"+localStorage.getItem(key)+"</td></tr>\n";
       }
       if (pairs == "<tr><th>Name</th><th>Value</th></tr>\n") {
         pairs += "<tr><td><i>empty</i></td><td><i>empty</i></td></tr>\n";
       }
       document.getElementById('pairs').<a class="zem_slink" href="http://en.wikipedia.org/wiki/Internet_Explorer" title="Internet Explorer" rel="wikipedia">innerHTML</a> = pairs;
     }