Wednesday, September 4, 2013

HTML5 web local storage

 HTML5 web storage is also know as Local storage which is same like cookies but there are few improvements in HTML5 web storage, removing drawbacks of tradition cookies. cookies has some limitation and drawbacks like

  1. Short storage space (4kb only)
  2. cookie data gets transmitted over HTTP header, It sends data over HTTP in unencrypted form, so if your application is not served over SSL it would be a big security hole.
  3. Bandwidth used to transmit the cookies is wasted.

There are basically two types of HTML5 web storage:
  1. Local Storage .
  2. Session Storage.           
Local Storage:
Local storage can be available to all scripts from the domain that originally stored the data. Local storage even persist after you close the tab. You need to manually remove it using javascript or need to clear browsers cache.

   // Store value in local storage
   localStorage.setItem(' key ', ' value ');

   // Retrieve value from local storage
   alert(localStorage.getItem(' key '));

   // Remove item from array
    localStorage.removeItem(' key ');

    // clear array

Session Storage:
Session storage is non persist, so if you close the browser session storage will be flushed and values will be no longer accessible. Data stored in session storage is accessible only from the domain that initially stored it. web browsers themselves clear session storage when we close it.
Similarly ,use the session storage for temporary...

   // Store value in session storage
   sessionStorage.setItem(' key ', ' value ');

   // Retrieve value from session storage
   alert(sessionStorage.getItem(' key '));

   // Remove item from array
   sessionStorage.removeItem(' key ');

   // clear array

For checking browser supporting HTML 5 local storage use following code:

    window['localStorage'] !== null ? 'Your browser supports local storage!' : 'Unfortunately your browser            does not support local storage!';

Download View Demo

No comments:

Post a Comment