Web Storage in HTML5

                In this blog I will explain Web Storage concept in HTML5. In traditional way if we want to store any data in client side we use cookies. Cookies are allow us stored the data in browser (client machine). It has some disadvantage. 

Disadvantages:

1.    Cookies can be disabled on user browsers

2.    Cookies are transmitted for each HTTP request/response causing overhead on bandwidth.

3.    No security for sensitive data

Cookies Limitation:

1.    Most browsers support cookies of up to 4096 bytes(4kbytes)

2.    Most browsers allow only 20 cookies per site; if you try to store more, the oldest cookies are discarded.

3.    Browser supports 300 cookies towards different websites.

4.    Complex type of data not allowed(eg: dataset), allows only plain text (ie, cookie allows only string content)

5.    Cookies are browser specific.

Web storage is web application software methods and protocols used for storing data in a web browser. Web storage supports persistent data storage, similar to cookies but with a greatly enhanced capacity and no information stored in the HTTP request header. There are two main web storage types  

1.     Local storage

2.    Session storage.

Web storage is being standardized by the World Wide Web Consortium (W3C). It was originally part of the HTML 5 specification, but is now in a separate specification. It is supported by Internet Explorer 8, Mozilla-based browsers (e.g., Firefox 2+, officially from 3.5), Safari 4, Google Chrome 4 (session Storage is from 5), and Opera 10.50

Advantage of Web Storage

                Web storage provide following futures.

1.    Storage Size

            Web storage give greatest storage capacity comparing to Cookies. For example

Sino	Browser	Support Version	Size
1	Chrome	4+	5Mb
2	Firefox	3.5+	5MB
3	IE	8+	25MB
4	Safari	4+
5	Opera	10.50+	10MB

2.    Client Side Interface

            Web storage offers two different storage areas, local storage and session storage which differ in scope and lifetime.

        Local storage is per origin (the combination of protocol, hostname, and port number). This data is available to all scripts loaded from pages from the same origin that previously stored the data) and persists after the browser is closed.

        Session storage is per-page-per-window and is limited to the lifetime of the window. Session storage is intended to allow separate instances of the same web application to run in different windows without interfering with each other, a use case that's not well supported by cookies.

Usage of Web storage

                Now let see how to use local storage .If you want to set value to local storage use setItem function with key value parameter. Similarly if you want to get value from local storage use getItem function with key value parameter. Key is identifier and value stored values .

Note: key/value pairs are always stored as strings. Remember to convert them to another format when needed. The following example counts the number of times a user has clicked a button. In this code the value string is converted to a number to be able to increase the counter: 

<form> <label id="lblClickCount"> </label> <input type="button" onclick="setSettings()" value="Save" /> </form> <script type="text/javascript">     localStorage.setItem("clickcount", 0);     function setSettings() {         if (typeof (Storage) !== "undefined") {             localStorage.setItem("clickcount", Number(localStorage.clickcount) + 1);             $("label").html(localStorage.getItem("clickcount"));         } else {             alert("Sorry! No Web Storage support.")         }         return false;     } </script>

  

Similarly SessionStorage 

Now see how to save and retrieve data from web storage

<script type="text/javascript">  var myObject = []; var employeeObject1 = new Object(); employeeObject1.name = "John"; employeeObject1.age = 23; myObject.push(employeeObject1); var employeeObject2 = new Object(); employeeObject2.name = "Peter"; employeeObject2.age = 24; myObject.push(employeeObject2); var employeeObject3 = new Object(); employeeObject3.name = "Jack"; employeeObject3.age = 25; myObject.push(employeeObject3);     function setSettings() { if (typeof (Storage) !== "undefined") { //save complex data in local storage        localStorage.setItem("employeelocal", JSON.stringify(myObject)); //save complex data in session storage        sessionStorage.setItem("employeelocal", JSON.stringify(myObject));                       } else {             alert("Sorry! No Web Storage support.")         }         return false;     } </script>

Now see how to retrieve complex data from web storage

<form> <label id="lblClickCount"> </label> <input type="button" onclick="setSettings()" value="Save" /> </form> <script type="text/javascript">     sessionStorage.setItem("clickcount", 0);     function setSettings() {         if (typeof (Storage) !== "undefined") {           sessionStorage.setItem("clickcount", Number(sessionStorage.clickcount) + 1);             $("label").html(sessionStorage.getItem("clickcount"));         } else {             alert("Sorry! No Web Storage support.")         }         return false;     } </script>

 

Now see how to save and retrieve data from web storage

<script type="text/javascript">       function getSettings() { if (typeof (Storage) !== "undefined") { //get complex data in local storage             var myObject = JSON.parse(localStorage.getItem("employeelocal ")); //save complex data in session storage       var myObject = JSON.parse(sessionStorage.getItem("employeelocal "));         } else {             alert("Sorry! No Web Storage support.")         }         return false;     } </script>