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:

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

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:

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.

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:

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.
 
Op diveintojavascript.com vind je meer informatie over Web Storage (Engels). Er is daar een tutorial voor het maken van een adresboek.

 
terug

html-363; Laatste wijziging: 24 april 2020