HTML Web Storage: Wat het is en hoe je het kunt gebruiken

Veel websites slaan gegevens op over zichzelf. Denk daarbij aan de datum en de tijd van het laatste bezoek, de advertenties die je te zien hebt gekregen, enzovoort. Van oudsher worden daarvoor cookies gebruikt.

Cookies worden gewoonlijk door de server aan de browser opgevraagd, op de server bewerkt en vervolgens teruggestuurd naar de browser, die het weer op de harde schijf van de gebruikers-PC zet. Daar kleven nadelen aan:

• De cookies worden onbeschermd tussen de server en de gebruikers-PC uitgewisseld, tenzij je een beveiligde verbinding gebruikt (https:// in plaats van http://).
• Het steeds uitwisselen van (dezelfde) gegevens veroorzaakt een hoop (nodeloos) dataverkeer. Er is daardoor een beperking voor de hoeveelheid data die je in een cookie kunt opslaan. In de praktijk is de grootte van een cookie maximaal 4 kB; te weinig om erg praktisch te zijn.
   
  Het is natuurlijk mogelijk om cookies te bewerken met JavaScript, zoals beschreven in het item Cookies: Gegevens van je website onthouden. Maar dan nog worden de cookies heen- en weer gestuurd tussen de server en de gebruikers-PC! Daar heb je als gebruiker geen invloed op.

Web Storage (ook bekend als HTML5 Storage en DOM Storage) lost deze problemen op:

• De gegevens staan op de gebruikers-PC en worden niet uitgewisseld met de server.
  Natuurlijk kun je gegevens uit de web storage wel naar de server sturen, maar dat moet je zelf programmeren.
• De gegevens worden alleen opgevraagd als de website daar expliciet om vraagt.
• De beschikbaarheid van de data is niet beperkt tot één tabblad of window.
• De hoeveelheid data die je kunt opslaan ligt niet vast in een specificatie. De meeste browsers stellen minstens 5 MB per domein (lees: per website) beschikbaar.

Je kunt de web storage data opslaan in je browser gedurende een sessie (session storage) of voor onbepaalde tijd (local storage). Anders dan bij cookies is de houdbaarheid dus onbeperkt.

Web storage werd voor het eerst genoemd in de eerste draft-versies van de HTML5-specificatie. In de definitieve HTML5-specificatie komt het echter niet meer voor. De grote browser-makers hebben het overgenomen en onderdeel gemaakt van het window-object, dat is elke browser beschikbaar is. Daardoor wordt Web Storage ook door oudere browsers ondersteund, en wel vanaf versie:
Internet Explorer 8, IE Mobile 10, FireFox 3.5 , Chrome 4, Safari 4.1, iOS Safari 3.2, Opera 10.5, IPhone 2 en Android Browser 2.0.

Er zijn twee soorten WebStorage:

• localStorage: Bewaarde gegevens blijven bestaan na het sluiten van de browser. Bij het starten van een nieuwe sessie zijn de gegevens weer beschikbaar.
• sessionStorage: Bij het sluiten van de browser worden de opgeslagen gegevens verwijderd

Opmerking: De naam localStorage doet precies wat het zegt. Het bewaart gegevens op je eigen, lokale, PC. Als je die gegevens ook wilt benaderen vanaf een andere PC of vanuit een andere browser, moet je de gegevens synchroniseren. Dat kan via een willekeurige server in de cloud (bijv. de host waar je website draait), maar je moet die synchronisatie-actie zelf schrijven. localStorage doet (en kan) dat niet uit zichzelf!

Data wordt opgeslagen in een eenvoudige database met records die elk een datapaar bevatten: key en value.

• key is een sleutel waarmee opgeslagen gegevens kunnen worden opgehaald. Je kunt hier elke karakter-reeks voor gebruiken. Als je Web Storage wilt gebruiken om lijsten in op te slaan (bijvoorbeeld je DVD-collectie), is het handig om voor key een geheel, positief getal te nemen
• value bevat de gegevens die horen bij key. Dit is altijd een string. Met behulp van JSON kun je hier echter ook complete objecten in kwijt (bijvoorbeeld titel, speelduur en aanschafdatum van je DVD's).

Het is (nog?) niet mogelijk om de Web Storage database te indexeren. Zoek-functies moet je zelf schrijven, waarbij je de database sequentieel doorloopt. Als je echter de key van een record kent, kun je het betreffende record direct benaderen. Zie verder, waar de methodes van localStorage en sessionStorage worden behandeld.

Gebruik:

• Je begint met testen of localStorage in de browser beschikbaar is:
   
  function IsLocalStorageBeschikbaar(){
if (window.localStorage) { // Bestaat niet in (te) oude browsers
  return true;
} else {
  return false
}
}
   
• Je kunt kijken hoeveel data-records er zijn. Daarvoor gebruik je de eigenschap: localStorage.length
   
• Om de inhoud van de localStorage op het scherm te zetten, maak je een lege <div id="my_Storage"></div> in de body van je document. Start daarna de JavaScript function toonStorage():
   
  function toonStorage() {
var output = "";
if (localStorage.length) { // Is true als localStorage.length > 0
  for (var i = 0; i < localStorage.length; i++) {
    output += localStorage.key(i) + ': ' +
      localStorage.getItem(localStorage.key(i)) + '\n';
  }
} else {
  output += 'Geen data gevonden voor dit domein.';
}
document.getElementById('my_Storage').innerHTML = output;
}
   
• Om gegevens op te halen gebruik je: localStorage.getItem(key).
• Om gegevens op te slaan gebruik je: localStorage.setItem(key, value);
• Om gegevens op te slaan in JSON-formaat gebruik je:
      localStorage.setItem(key, JSON.stringify({name: 'value'}));
• Om gegevens te verwijderen gebruik je: localStorage.remove(key).
• Om alle gegevens te verwijderen gebruik je: localStorage.clear().
• Met localStorage.key(nummer) haal de de key op van data-record nummer.

sessionStorage gebruik je op precies dezelfde manier als localStorage.

Zie het item JSON: Wat het is en hoe je het kunt gebruiken voor meer informatie over JSON.