HTML5 Web Storage

Anoop Kumar Sharma
10y
4.4k
0
1

Article

Web Storage is a client-side storage. It allows users to persist data in the form of key/value pairs. Before it, Web Developers used cookies for storing objects/data locally in the user's or client's machine. Web Storage is much similar to cookies but we can store a greater amount of data using web storage and it is very secure.

Disadvantages of Cookies

We can store 4KB of data in cookies whereas using Web Storage, we can store up to 5MB of data.
Cookies are sent along with every HTTP request hence it slows down web applications.
Cookies are included with every HTTP request (unencrypted) hence Cookies are less secure whereas data in Web Storage is stored in the client's browser.

Web Storage is supported in these browsers:

Chrome 5+
Firefox 3.6+
Internet Explorer 8+
and so on

We can also check browser support using:

if(typeof(Storage)!=="undefined")
{
alert("Your browser supports HTML5 Web Storage");
}
else
{
alert("Your browser does not supports HTML5 Web Storage");
}

One of the Important points is that Web Storage is browser-specific. Let's understand that with an example. Suppose the user visits your site using Chrome, then any data that was stored to Chrome's Web Storage Store is available with the Chrome browser but not with other browsers. If the user revisits your site with a different browser, then the data saved within Chrome's Web Storage is unavailable in the other browser. So, Web storage is browser-specific and each browser's storage is separate and independent.

Types of Web Storage

There are the following two types of HTML5 Web Storage:

Local Storage
Session Storage

A Local Storage object stores the data with no exipration date; that means the stored data will not be deleted even after the browser is closed. A session storage object is very similar to Local Storage. The only difference between Session Storage and Local Storage is that Session Storage data is deleted when the browser is closed by the user.

Some Common method and properties for local and session storage are:

Example: Storing and retrieving data from Local Storage

First, we need to check whether the browser supports Web Storage or not. If it is supported than we call the setItem method of localStorage and the key/value pair. Then we retrieve the value from localStorage using the getItem method and display it in div (output).

<!DOCTYPE html>
<html>
<head>
<title>Local Storage Example</title>
</head>
<body>
<div id="output"></div>
<script>
if(typeof(Storage)!=="undefined")
{
localStorage.setItem("Name","Anoop Sharma");
document.getElementById("output").innerHTML=localStorage.getItem("Name");
}
else
{
document.getElementById("output").innerHTML="Your Browser does not Support HTML5 Web Storage";
}
</script>
</body>
</html>

Example: Storing and retriving data from Session Storage

Everything in the following is similar to the previous example exceot the localStorage object must use a sessionStorage object.

<!DOCTYPE html>
<html>
<head>
<title>Session Storage Example</title>
</head>
<body>
<div id="output"></div>
<script>
if(typeof(Storage)!=="undefined")
{
sessionStorage.setItem("Name","Anoop Sharma");
document.getElementById("output").innerHTML=sessionStorage.getItem("Name");
}
else
{
document.getElementById("output").innerHTML="Your Browser does not Support HTML5 Web Storage";
}
</script>
</body>
</html>

Example: Showing the use of various properties and methods like length, setItem, getItem, clear and so on in a localStorage type of Web Storage

In this example we have taken two divs with id (box1 and box2). box1 contains textboxes and buttons whereas box2 is used for displaying the data from localStorage.
Windows.addEventlistener calls the displaythis() function on loading the window/page.
The savethis() function saves the data from the TextBox to the local Storage then displays the data on div (#box2) by calling the displaythis() function.
The displaythis() function runs a loop starting from i=0 to i<localStorage.length (that returns the number of key/value pairs in local storage).
Get the keys using localStorage.key(i) that retrieves the key at a specific index (in other words i) and use this value for getting the value using the .getItem method.
After getting both of the key/value pairs display it in a div (with id box2).
For clearing the data from localStorage we use the clearthis() fuction in the onclick event of the clear button.

<!DOCTYPE html>
<html>
<head>
<title>Local Storage Example</title>
<style>
#box1{
float:left;
padding:16px;
border:1px dashed black;
margin-left:20px;
}
#box2{
float:left;
padding:16px;
border:1px dashed green;
width:300px;
margin-left:20px;
}
</style>
<script>
//display method for displaying data on window load and after saving
function displaythis()
{
var box2=document.getElementById("box2");
box2.innerHTML="";
for(var i=0;i<localStorage.length;i++)
{
var keyval=localStorage.key(i);
var itemval=localStorage.getItem(keyval);
document.getElementById("box2").innerHTML+="Key="+keyval+" Value="+itemval+"<br>";
}
}
//Save data to localStorage method
function savethis(){
var txtbox1=document.getElementById("textbox1").value;
var txtbox2=document.getElementById("textbox2").value;
localStorage.setItem(txtbox1,txtbox2);
alert("Record Added!");
displaythis();
document.getElementById("textbox1").value="";
document.getElementById("textbox2").value="";
}
//for Clearing the data from localStorage
function clearthis(){
localStorage.clear();
displaythis();
}
//call displaythis method on window load
window.addEventListener("load",displaythis,false);
</script>
</head>
<body>
<div id="box1">
<p>Key: <input type="text" id="textbox1"></p>
<p>Value:<input type="text" id="textbox2"></p>
<input type="button" id="button" value="Save" onclick="savethis();"><input
type="button" id="button" value="Clear" onclick="clearthis();">
</div>
<div id="box2">No Data Stored</div>
<script>
</script>
</body>
</html>

Working Preview

Viewing Web Storage data using Web inspector

1. Right-click in the body of the Web Page and then click on Inspect Element. (You can also get the same from "Tools" -> "Developer Tools".)

2. Then click on the resource tab, than click on Local Storage.

Now you are able to see the data (key/value pairs) that we have added recently. If you double-click on the value in the Web Inspector then you find that you can actually modify the value stored there.

I hope you like it. Thanks

Up Next

Ebook Download

View all

A Guide to Mastering HTML5 CSS3 and JavaScript

Read by 3 people

Download Now!

Learn

View all