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*/

Example

<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