HTML 5 Web Storage

Published on 2012-07-29

9,794 Points

6 Comments

3,594 Views

2 Endorsements

Last Modified: 2012-09-01

Approved

HTML 5 is the latest buzz in developing RIA (Rich Internet Application). One the best features in HTML 5 is Web Storage!

It's really amazing and powerful. It totally replaces the traditional Cookies!

HTML 5 Web Storage is of two types -

1. Local Storage
2. Session Storage

I discussed Local Storage on my blog (see below) but will discuss Session Storage in detail here, so that you can kick start using it at once, when you are done reading this article.

Local Storage

I already discussed about Local Storage on my blog - Local Storage - Avoid Cookies

Session Storage

In contrast to Local Storage, the lifetime of this storage is per session. When the user closes the browser, the stored data expires. It just stores data for particular session.

Similar to Session in Server Side Programming( ASP.NET, PHP ), it just holds the data in Client Side.

Unlike Cookies, it won't travel with each request to the server. It will be available in the browser and it can be retrieved when it requires.

Storing and retrieving data in the Session Storage is pretty simple!

Store data in Session Storage!

<script type="text/javascript">
//Check whether the browser supports Session Storage, if yes, then store the data.
if (window.sessionStorage) {
            sessionStorage.myName = "Session Storage";
        }
</script>

Open in new window

Data is stored as Key/Value pair! So in the above code -

myName is Key, Session Storage is Value.

It's always a good practice, to check whether the feature is supported by the browsers or not, since the feature may not be support in the older browsers! In that case you have a chance to create a fall back method.

Retrieve the data from Session Storage!

<script type="text/javascript">
 if(window.sessionStorage && sessionStorage.myName != null)
            alert(sessionStorage.myName);
</script>

Open in new window

A simple app demonstrating the Session Storage!

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form id="form1" >
    <div>
     <input type="button" value="Get Value" onclick="getSessionStorageValue();" />
    </div>
    </form>
    <script type="text/javascript">

        if (window.sessionStorage) {
            sessionStorage.myName = "Session Storage";
        }

        function getSessionStorageValue() {
            if(window.sessionStorage && sessionStorage.myName != null)
            alert(sessionStorage.myName);
        }

    </script>

</body>
</html>

Open in new window

NOTE: Session and Local Storage is compatible with all HTML 5 browsers. i.e., IE 8+, Firefox 4+, Google Chrome 10+, Opera 10+ etc.,

IE8 is not fully HTML5 compatible, but it supports Web storage!

Only data of type Strings can be stored. It also allows to store JSON data, by calling JSON.Stringify() method to convert the JSON to string!

Maximum storage size per domain in 5 MB. This is consistent across all browsers!

I hope you can start using HTML5 Web Storage instead of Cookies today!

Happy Web Programming!!!