In this tutorial, I am going to teach you how to store persistent variables using JavaScript and HTML5 web storage. localStorage and sessionStorage are used.
Javascript persistent storage is very important in web application especially when you intend to pass variable value from one webpage to another without server trip.
The example am using here will store personal bio-data provided by user as well as retrieve the person's bio-data even when the broswer is closed or system is been restarted. So you see, it is more or like javascript local database or Local Storage.
This technique is very handy mostly when you want to collect temporary user's information and have access to them without having to make a trip to the web server. So how do you save records without having to make a trip to the server? By using web browser persistent storage facility.
Web storage is a process used by web application to store data locally within user's browser.
Web Storage vs Cookies
Until the introduction of HTML5, web applications used to store data through cookies means and this technique somehow affect application performance since cookies are included in every server request.
However, web storage is more secure, and large amounts of data can be stored locally, without affecting the application performance.
While cookies have less storage space, web storage has large storage space and can even store up to 5M data and the information is access locally without having to transfer data to server.
Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.
When talking about web storage, there are two objects provided by web that should come to our mind;
window.localStorage: The window.localStorage is used to store data without no expiration date and data are persistent even when the browser is closed
localStorage['variable name'] = 'value';
window.sessionStorage: Unlike window.localStorage, window.sessionStorage stores data for one session and data is only persistent when the browser tab is not closed else lost.
sessionStorage.variable name= 'value';
Before you use web storage, you have to check browser support for localStorage and sessionStorage:
Below is the snippet for checking browser compatibility.
if (typeof(Storage) == "undefined") {
// Your browser does not support web storage
} else {
// proceed
}
With the above script we have successfully tested the broswer support for web storage in order to know either to proceed or not.
First and foremost, in this tutorial, am assuming that you known how to work with html. So you should produce something as follows;
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
window.localStorage Example
</title>
</head>
<body>
<div id="dv">
<div class="title">Web Storage Using JavaScript Example</div>
<p>Name<br/>
<input type="text" id="tname" value=""/>
</p>
<p>Gender<br/>
<input type="text" id="tgender" value=""/>
</p>
<p>Date of Birth<br/>
<input type="text" id="tdob" value=""/>
</p>
<button onclick="store();">Save</button>
<button onclick="retrieve();">Read Saved Record</button>
<button onclick="deleteitem();">Delete Record</button>
<div id="dvsaved"></div>
</body>
</html>
We need the following CSS to style design. So, type or copy and paste the following CSS into the head tag
<style>
.txt{
width:80%;
height:20px;
background-color:ghoshwhite;
border-style: solid;
border-color:gray;
border-width:1px;
}
#dv{
width:90%;
margin: 0 auto;
border-style:solid;
border-color: grey;
border-width:1px;
}
#dvsaved{
background-color:grey;
color:#fff;
width:90%;
margin: 0 auto;
border-style:solid;
border-color: grey;
border-width:1px;
}
.title{
background-color:#000;
color:#fff;
width:100%;
}
</style>
We also need JavaScript to achieve the purpose of this tutorial. So type or copy and paste the following script into the head tag
<script>
function store()
{
//first we need to check if broswer support web storage
if (typeof(Storage) == "undefined") {
alert ("Your broswer does not support web storage/session storage");}
else {
var tn = document.getElementById("tname");
var tg = document.getElementById("tgender");
var td = document.getElementById("tdob");
localStorage['nm'] = tn.value;
localStorage['gender'] = tg.value;
localStorage['dob'] = td.value;
//sessionStorage.nm = tn.value;
alert ('saved');}
}
function retrieve()
{
var res = document.getElementById("dvsaved");
res.innerHTML = "<div class='title'>Your saved bio-data</div>Name: " + localStorage['nm'] + "<br>Gender: " + localStorage['gender'] + "<br>Date of Birth: " + localStorage['dob'];
}
function deleteitem(){
localStorage.removeItem('nm');
localStorage.removeItem('gender');
localStorage.removeItem('dob');
alert ("Record deleted");
}
</script>
In this sessionStorage, nothing much changed except the JavaScript.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
sessionStorage Example
</title>
</head>
<body>
<div id="dv">
<div class="title">Web Storage Using JavaScript Example</div>
<p>Name<br/>
<input type="text" id="tname" value=""/>
</p>
<p>Gender<br/>
<input type="text" id="tgender" value=""/>
</p>
<p>Date of Birth<br/>
<input type="text" id="tdob" value=""/>
</p>
<button onclick="store();">Save</button>
<button onclick="retrieve();">Read Saved Record</button>
<button onclick="deleteitem();">Delete Record</button>
<div id="dvsaved"></div>
</body>
</html>
We need the following CSS to style design. So, type or copy and paste the following CSS into the head tag
<style>
.txt{
width:80%;
height:20px;
background-color:ghoshwhite;
border-style: solid;
border-color:gray;
border-width:1px;
}
#dv{
width:90%;
margin: 0 auto;
border-style:solid;
border-color: grey;
border-width:1px;
}
#dvsaved{
background-color:grey;
color:#fff;
width:90%;
margin: 0 auto;
border-style:solid;
border-color: grey;
border-width:1px;
}
.title{
background-color:#000;
color:#fff;
width:100%;
}
</style>
We also need JavaScript to achieve the purpose of this tutorial. So type or copy and paste the following script into the head tag
<script>
function store()
{
//first we need to check if broswer support web storage
if (typeof(Storage) == "undefined") {
alert ("Your broswer does not support web storage/session storage");}
else {
var tn = document.getElementById("tname");
var tg = document.getElementById("tgender");
var td = document.getElementById("tdob");
sessionStorage.nm = tn.value;
sessionStorage.gender = tg.value;
sessionStorage.dob = td.value;
alert ('saved');}
}
function retrieve()
{
var res = document.getElementById("dvsaved");
res.innerHTML = "<div class='title'>Your saved bio-data</div>Name: " + sessionStorage.nm + "<br>Gender: " + sessionStorage.gender + "<br>Date of Birth: " + sessionStorage.dob;
}
function deleteitem(){
sessionStorage.removeItem('nm');
sessionStorage.removeItem('gender');
sessionStorage.removeItem('dob');
alert ("Record deleted");
}
</script>