HTML5 Web Storage

HTML5 offers two new methods for storing data on the client:

  • localStorage - stores data with no time limit
  • sessionStorage - stores data for one session

HTML5 Web Storage Methods

  • setItem(key,value): adds a key/value pair to the sessionStorage object.
  • getItem(key): retrieves the value for a given key.
  • clear(): removes all key/value pairs for the sessionStorage object.
  • removeItem(key): removes a key/value pair from the sessionStorage object.
  • key(n):retrieves the value for key[n].
sessionStorage.setItem(someKey,someValue);sessionStorage.someKey = someValue;
sessionStorage.getItem(someKey); /*returns someValue*/sessionStorage.someKey; /*returns someValue*/
sessionStorage.removeItem(someKey); /*Removing a Key/Value*/sessionStorage.clear(); /*Clearing Storage*/


<script>window.addEvent(domready, function() { var value = sessionStorage.getItem(key); if(!value){ alert('No value found'); sessionStorage.setItem(key,1234); } else{alert('Value found: ' +value);}   $$(.button).addEvents({click: function(e){   alert('remove value');   sessionStorage.removeItem(key);   }}); });</script>

<p class=button>remove value</p>

Related Posts

HTML5 geolocation, HTML5 video, HTML5 structure page