MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with HTML5 Web Storage

In this article we will see how to work with Web Storage in HTML5.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Introduction

In traditional HTML, data is stored in user’s web browser using HTTP cookies. Cookies are sent back and forth with every HTTP request between browser and server. If server has no use of cookie and required only at client side, bandwidth will be wasted. Browser also impose limit on number of cookies which can be stored per domain as well as on total size of cookies per domain.

Using HTML5, data can be stored in user’s web browser without including in every HTTP request though it can be send to server when asked for. HTML5 web storage is fast and secure. It can store large amount of data as compared to cookies. Data is stored using key/value pairs and webpage can store and retrieve it. Webpage can only access data stored by itself.

Objects used in HTML5 web storage

localStorage

It stores data with no expiration date and tied to one domain. To change existing value or to add new value, use below code in JavaScript:

localStorage.setItem(‘key’, ‘value’);

First argument is used to uniquely identify data and second argument is data itself.

To retrieve existing data:

var data = localStorage.getItem(‘key’);  

This data is stored in browser permanently until removed even if you close the browser. You can also access stored data from another webpage under same domain.

Other alternatives to set and get data:

localStorage[‘key’] = ‘value’; 
var data = localStorage[‘value’];

localStorage.key = ‘value’; 
var data = localStorage.key;

To remove stored data:

localStorage.removeItem(‘key’);

To deleted everything from storage object:

localStorage.clear();

sessionStorage

It is used to store data temporally in web browser. Data will be cleared when browser session ends typically when browser window is closed. Data is accessible to different webpage under same domain until browser session is there. When browser windows is closed, data will be cleared.

sessionStorage.setItem(’key’, ‘value’);

First argument is used to uniquely identify data and second argument is data itself to retrieve existing data:

var data = sessionStorage.getItem(‘key’);  

This data is stored in browser temporally until browser session. You can also access stored data from another webpage under same domain.

Other alternatives to set and get data:

sessionStorage [‘key’] = ’value’; 
var data = sessionStorage [‘key’];

var data = sessionStorage.key;
sessionStorage.key = ‘value’; 

To remove stored data:

sessionStorage.removeItem(‘key’);

To deleted everything from storage object:

sessionStorage.clear();

Try below example to implement localObject :

Note : Many versions of different browsers doesn’t support HTML5 web storage. Please check your browser version. I have tested on Firefox 19.0.2 on windows 7 machine.

Listing 1: Implementing localObject


<!DOCTYPE html>
<html>
<script type="text/javascript">
    if (typeof (Storage) !== "undefined") {
        function storeDetails() {
            var name = document.getElementById("name").value;
            var age = document.getElementById("age").value;
            var self = document.getElementById("self").value;

            localStorage.name = name;
            localStorage.age = age;
            localStorage.self = self;
            alert("stored");
        }

        function getDetails() {
            alert(localStorage.name);
            alert(localStorage.age);
            alert(localStorage.self);
        }
    }
    else {
        alert("Sorry your web browser doesnt support web storage,try latest browser");
    }

</script>
<body>
    <form>
        <fieldset>
            <legend>Enter your details</legend>
            <p>
                <label>Name</label>
                <input type="text"
                    id="name"
                    value="" />
            </p>
            <p>
                <label>Age</label>
                <input type="text"
                    id="age"
                    value="" />
            </p>
            <p>
                <label>About your self</label>
                <textarea id="self"
                    rows="5"
                    cols="100"></textarea>
            </p>
            <p>
                <button type="button" onclick="storeDetails();">Store my details permanently</button>
            </p>
            <p>
                <button type="button" onclick="getDetails();">get my details</button>
            </p>
        </fieldset>
    </form>
</body>
</html>

Try below example to implement sessionObject :

Note : Many versions of different browsers doesn’t support HTML5 web storage. Please check your browser version. I have tested on Firefox 19.0.2 on windows 7 machine.

Listing 2: Implementing sessionObject


<!DOCTYPE html>
<html>
<script type="text/javascript">
    if (typeof (Storage) !== "undefined") {
        function storeDetails() {
            var name = document.getElementById("name").value;
            var age = document.getElementById("age").value;
            var self = document.getElementById("self").value;

            sessionStorage.name = name;
            sessionStorage.age = age;
            sessionStorage.self = self;
            alert("stored");
        }

        function getDetails() {
            alert(sessionStorage.name);
            alert(sessionStorage.age);
            alert(sessionStorage.self);
        }
    }
    else {
        alert("Sorry your web browser doesnt support web storage,try latest browser");
    }

</script>
<body>
    <form>
        <fieldset>
            <legend>Enter your details</legend>
            <p>
                <label>Name</label>
                <input type="text"
                    id="name"
                    value="" />
            </p>
            <p>
                <label>Age</label>
                <input type="text"
                    id="age"
                    value="" />
            </p>
            <p>
                <label>About your self</label>
                <textarea id="self"
                    rows="5"
                    cols="100"></textarea>
            </p>
            <p>
                <button type="button" onclick="storeDetails();">Store my details permanently</button>
            </p>
            <p>
                <button type="button" onclick="getDetails();">get my details</button>
            </p>
        </fieldset>
    </form>
</body>
</html>

Best would be if you close and open browser window while trying above examples. You will see the difference between two above example.

About HTML5

HTML5 is a new standard for HTML after HTML4 .HTML5 is still in progress but today many different browsers support it.HTML5 is done by World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).HTML5 is not an official standard yet. Some of the features of HTML5 are Offline / Storage, Realtime / Communication, File / Hardware Access, Semantics & Markup, Graphics / Multimedia. Perhaps the most important thing to understand about HTML5 is not the coding details and changes themselves, but the high-level functions they give you access to. In fact, HTML5 is all about high-level functions rather than details. For instance, instead of thinking of multimedia objects and then defining them as video or audio and so on, in HTML5 you can simply write something like:

Listing 3: HTML Audio and Video examples


<video src="watchthis.mp4" width="640" height="480">
	<a href="watchthis.mp4">Here's my video</a>
</video>


<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Conclusion

Web storage is of great use. You can store user’s data in browser and later sent back to server when required. No need to send back and forth again and again. Typical example of this is shopping website where user add items and after checkout send items to server for further processing. Web storage has great performance benefits. Using web storage you can easily save data permanently .Typical example of this is storing users personalized data, when user returned you can get this data without requesting to server again. I strongly encourage to use web storage but please don’t use it for sensitive information because SSL is great with cookies.



Assistant System Engineer na Tata Consultancy Services. Bachelor of Technology (B.Tech.), Computer Science na Uttar Pradesh Technical University.

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login