Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

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

×

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

HTML5 Local Storage and Session Storage

User data storage has been made easy with the new storage objects (sessionStorage and localStorage) made available in HTML5. In this article we will see how to work with it.

With HTML5, data can be stored in the user’s browser. Earlier it was done using cookies. With HTML5 DOM the following objects can be used to store data.

  • sessionStorage
  • localStorage

All storage is done using key-value pairs. This article explains how to store data using the above objects. The storage objects are supported by all latest browsers.

Note that I have used Opera to test the code listings and provide the images.

Session storage

Session storage allows users to store the data for a single session. As soon as user leaves the page and closes the browser window the data is lost. This can be used for interactive games where a temporary storage is required to store data.

Let us look at how to set (store) data

Listing 1: Syntax for storing data in session storage

sessionStorage.setItem(“keyName”,value);

The keyName has to be a string value while the value can be any acceptable data type. The key-value pair is always stored as string values. So always remember to convert the value to the correct data type before using it.

Here is an example of how to use session storage.

Listing 2: Session storage

<!DOCTYPE HTML>
<html>
<head>
<title>Session storage</title>
<script type="text/javascript">
function AssignValues()
{
sessionStorage.setItem("text1", document.form1.text1.value);
sessionStorage.setItem("text2", document.form1.text2.value);
sessionStorage.setItem("text3", document.form1.text3.value);
}

function Value1()
{
alert("Value 1 is " + sessionStorage.getItem("text1"));
}

function Value2()
{
alert("Value 2 is " + sessionStorage.getItem("text2"));
}

function Value3()
{
alert("Value 3 is " + sessionStorage.getItem("text3"));
}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="text1" placeholder="Enter text...">
<br>
<input type="text" name="text2" placeholder="Enter text...">
<br>
<input type="text" name="text3" placeholder="Enter text...">
<br>
<input type="button" value="Assign values" onClick="AssignValues()">
<br>
<input type="button" value="Show value 1" onClick="Value1()">
<br>
<input type="button" value="Show value 2" onClick="Value2()">
<br>
<input type="button" value="Show value 3" onClick="Value3()">
<br>
</form>
</body>
</html>
Results of the above listing

Figure 1: Results of the above listing

There are four functions in use in the above listing. The AssignValues function is used to set the key-value pairs. The text from the first textbox is assigned to a key text1, text from second textbox is assigned to key text2 and the text from the third textbox is assigned to the key text3. The Value1 function retrieves the key text1. The Value2 function retrieves the key text2. The Value3 function retrieves the key text3. The functions are called upon the onClick event of the various buttons.

Note that if you click the first button without any textbox values, an empty value is alerted as the value. Also the data is lost as soon as the browser is closed.

Local Storage

Local storage is persistent; it stores data with no expiry date. Users can leave the site, shut down the computer and the data is still present in the browser. Local storage is very similar to cookies except for some important differences

  • Cookies have very little storage space; local storage allows much more storage space
  • Cookies are included with every server request while local storage is transmitted only upon request. This means that we can store large amounts of data without affecting the website performance.

Local storage values can be set and retrieved in the same fashion as session storage.

Listing 3: Local storage

<!DOCTYPE HTML>
<html>
<head>
<title>Local storage</title>
<script type="text/javascript">
function AssignValues()
{
localStorage.setItem("text1", document.form1.text1.value);
localStorage.setItem("text2", document.form1.text2.value);
localStorage.setItem("text3", document.form1.text3.value);
}

function Value1()
{
alert("Value 1 is " + localStorage.getItem("text1"));
}

function Value2()
{
alert("Value 2 is " + localStorage.getItem("text2"));
}

function Value3()
{
alert("Value 3 is " + localStorage.getItem("text3"));
}

function ShowLength()
{
alert("No of items in local storage is " + localStorage.length);
}
function ClearStorage()
{
localStorage.clear();
alert("No of items in local storage is " + localStorage.length);
}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="text1" placeholder="Enter text...">
<br>
<input type="text" name="text2" placeholder="Enter text...">
<br>
<input type="text" name="text3" placeholder="Enter text...">
<br>
<input type="button" value="Assign values" onClick="AssignValues()">
<br>
<input type="button" value="Show value 1" onClick="Value1()">
<br>
<input type="button" value="Show value 2" onClick="Value2()">
<br>
<input type="button" value="Show value 3" onClick="Value3()">
<br>
<input type="button" value="Show length" onClick="ShowLength()">
<br>
<input type="button" value="Clear storage" onClick="ClearStorage()">
</form>
</body>
</html>

The above listing contains similar functions as listing 2 except that it uses local storage object. The ShowLength function is used to retrieve the number of items in the local storage using the length property of the localStorage object. The local storage is cleared using the clear() function of the local storage object.

Results of the above listing

Figure 2: Results of the above listing



I am a Senior Web Developer from London with over 5years of experience in ASP.NET, HTML, CSS. I am well versed in VB.Net, C# and SQL as well.

What did you think of this post?
Services
[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