You may want to put some text here

Gebruik maken van HTML5 localStorage in browsers

Voor een nieuwe project was ik wat aan het spelen met een nieuwe feature van HTML5, namelijk localStorage. Hiermee kan je lokaal in de browser gegevens gaan opslaan. Het is inderdaad ook mogelijk om zoiets met cookies te doen maar er zijn een aantal nadelen aan cookies ten opzichte van de nieuwe localStorage.

  • Minder veilig
  • Alle cookie data wordt met elke request meegestuurd dus trager
  • Meer code nodig om te lezen en te schrijven van en naar cookies

Hoe local storage gebruiken

Om even een voorbeeldje te geven van hoe gemakkelijk het is om iets naar de localstorage te schrijven:

localStorage.setItem('mijndata',data_var);

En om mijndata vervolgens terug op te halen gebruik je volgende code:

data_var = localStorage.getItem('mijndata');

Als je nu een object of een array zou willen opslaan dan moet je de variable eerst serializen en bij het ophalen eerst deserializen. Dit kan je gemakkelijk met de JSON klasse die tegenwoordig in nieuwe browsers zit ingebakken.

Om een object op te slaan gebruik je:

localStorage.setItem('mijnobject', JSON.stringify(object));

Om een object terug op te halen doe je het volgende:

object =JSON.parse(localStorage.getItem('mijnobject'));

Welke browser

De volgende browser ondersteunen localStorage:

  • Firefox 3.5+
  • Safari 4
  • IE8+
  • Chrome
Oudere versies van Chrome kunnen normaal ook gebruik maken van de localStorage omdat dit in de Google Gears API zit, die in alle Google Chrome browser aanwezig is.

Tip

Let op als je wat gaat testen in Mozilla Firefox dat je je test html draait vanaf een server bijvoorbeeld: http://localhost/test.html en niet rechtstreeks met een file path zoals file:///c:/Data/test.html. In het laatste geval zal de localStorage in Chrome perfect werken, maar niet in Mozilla Firefox.

The Author of this post is Wim Mostmans

Wim Mostmans heeft een eigen webontwikkeling bedrijf Sitebase waar hij voltijds voor werkt. Hij beheert ook nog enkele websites waaronder deze en een Computerforum. Blijf op de hoogte van waar Wim mee bezig is door hem te volgen op Twitter.

1 Responses »

Trackbacks

  1. HTML5 BubblePop game | ComputerFAQ

Leave a Comment