Friday, November 4, 2011

HTML5 Client-side storage


Another great feature from HTML5 is Client-side Storage. Currently browsers are using HTTP cookies to store information in client side. Cookies are key-value pairs of strings in a text file and are sent to the server with every HTTP request that goes to the same domain.
Client-side Storage
It is divide to three methodologies:

  • Local Storage
  • Session Storage
  • Database Storage
Local Storage
JavaScript object name is localStorage.
To add a value:
localStorage.setItem('myname', 'Hasan Savran');
To access a value :
alert("Name : " + localStorage.getItem('myname'));
OR
alert("Name : " + localStorage.getItem('myname'));
To remove an item
localStorage.removeItem('myname'));

Myname object's value will be associated with the domain under which your script is running.
Local Storage is a great place to store your application settings.

Session Storage
Session Storage replaces the cookies, Here are some notes about Session Storage.



  • It allows much more space than cookies.
  • Session data isn't sent to server with every HTTP request. The developer controls what to send.
  • If you open the same web site in two tabs, both tabs would share the same cookie.Session storage is tied to tabs, so if you have two tabs, you would have two different sessions.
JavaScript object name is sessionStorage.
To add a value:
sessionStorage.setItem('Customername', 'Hasan Savran');
To access an object:
alert("Your name is " + sessionStorage.getItem('Customername'));
OR
alert("Your name is " + sessionStorage.Customername);
To remove an item
sessionStorage.removeItem('Customername');

No comments:

Post a Comment