<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

HTML 5 Web Storage

Published on
9,682 Points
3,482 Views
2 Endorsements
Last Modified:
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!!!
2
6 Comments
LVL 75

Expert Comment

by:käµfm³d 👽
It might be helpful if you mention how much data can be stored in web storage, and also that it is shared per domain, not per page.
0
LVL 23

Author Comment

by:Roopesh Reddy
@Kaufmed

Thanks for the feedback! I'll try to update the article pretty soon!
0
LVL 1

Expert Comment

by:rito1
Hi, is it also worth mentioning that If you are developing web apps that utilise localStorage on mobile Safari that Apple have made a change that make it non- persistent from iOS5.1 onward.. Doh!

http://www.moneytoolkit.com/2012/04/apple-ios-html5-localstorage-is-broken/
0
OWASP: Threats Fundamentals

Learn the top ten threats that are present in modern web-application development and how to protect your business from them.

LVL 23

Author Comment

by:Roopesh Reddy
Hi rito1,

Thanks for the update!
0
LVL 23

Author Comment

by:Roopesh Reddy
Hi,

I'm done updating the information suggested by the users!
0

Expert Comment

by:Dinesh Kumar
can you help in telling where localstorage gets stored in computer?
0

Featured Post

Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month