Introduction
In this article we will learn how to store a value in Session Storage and how to retrieve the stored value from the Session Storage using HTML5. HTML5 comes with the new feature Session Storage under Client Storage. HTML5 Session Storage is similar to HTTP session cookies. It is used for storing data on the client side.
Session Storage simply stores the value on the basis of key/value pairs and Session Storage can store megabytes of values; the exact size depends on the browser implementation. For IE8 it is 10 MB. In HTML5 we can store the value of any element into a session variable and we can also fetch the stored value and display them on the webpage.
The Session Storage object does not persist if we close the tab. It is like a value stored into a variable and fetched when required. Session Storage works in IE8+, Firefox 3.5+, Safari 4.0+, Chrome 2.0+ & Opera 10.5+. The use of Session Storage is very smooth and easy. It is used like defining a variable and using it.
It is possible to store large amounts of data without affecting the website's performance. The data is stored in different areas for different websites, and a website can only access data stored by it. It is a global object in JavaScript. We can direct set and get values in this object using Session Storage methods. Session Storage should be used to store ephemeral data related to a single browser window as it doesn't persist after the window is closed.
The Session Storage basically consists of 4 main methods.
- setItem(key, value): This method is used to set the value into the Session Storage based on the key.
- getItem(key): This method is used to get the value that is stored into the Session Storage. It takes a key and returns the value.
- removeItem(key): This method is used to remove a particular value from the Session Storage basis of key.
- clear(): This method is used to clear the Session Storage.
Here we use Session Storage to store the value and then, retrieve and display it using HTML5 and JavaScript.
Step 1: HTML5 uses JavaScript to store and access the data.
Here is the code
<script type="text/javascript">
function dofirst() {
var button = document.getElementById("button");
button.addEventListener("click",savecrap,false);
}
function savecrap()
{
var one=document.getElementById("one").value;
var two=document.getElementById("two").value;
sessionStorage.setItem(one,two);
display(one);
}
function display(one)
{
var rightbox=document.getElementById("rightbox");
var two=sessionStorage.getItem(one);
rightbox.innerHTML="Name of variable:" +one+"<br/> value:" +two;
}
window.addEventListener("load",dofirst,false);
</script>
Step 2: We add some CSS styling to code to dispaly the element well.
Here is the code:
<style type="text/css">
#one
{
width: 240px;
background-color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
color: #FF0000;
}
#two
{
width: 222px;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #FF0000;
background-color: #CCCCCC;
}
#button
{
width: 116px;
height: 39px;
}
#rightbox
{
width: 222px;
height:200px;
border: solid 2;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #FF0000;
background-color: #CCCCCC;
}
</style>
Step 3: This is the code for defining the tag:
Here is the code:
<body>
<section ud="leftbox">
<form>
<p>(key) One: <input type="text" id="one"</p>
<p>(value) Two: <textarea id="two"> </textarea></p>
<p> <input type="button" id="button" value="save" /></p>
</form>
</section>
<section id="rightbox">
Nothing Yet Hoss!
</section>
</body>
Step 4: Write the full code into the .htm page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function dofirst() {
var button = document.getElementById("button");
button.addEventListener("click",savecrap,false);
}
function savecrap()
{
var one=document.getElementById("one").value;
var two=document.getElementById("two").value;
sessionStorage.setItem(one,two);
display(one);
}
function display(one)
{
var rightbox=document.getElementById("rightbox");
var two=sessionStorage.getItem(one);
rightbox.innerHTML="Name of variable:" +one+"<br/> value:" +two;
}
window.addEventListener("load",dofirst,false);
</script>
<style type="text/css">
#one
{
width: 240px;
background-color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
color: #FF0000;
}
#two
{
width: 222px;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #FF0000;
background-color: #CCCCCC;
}
#button
{
width: 116px;
height: 39px;
}
#rightbox
{
width: 222px;
height:200px;
border: solid 2;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #FF0000;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<section ud="leftbox">
<form>
<p>Enter the Key: <input type="text" id="one"</p>
<p>Enter the Value: <textarea id="two"> </textarea></p>
<p> <input type="button" id="button" value="save" /></p>
</section>
<section id="rightbox">
Session Storage is empty!!
</section>
</form>
</body>
</html>
Output 1: When there is no key\pair in the Session Storage:
![1.jpg]()
Output 2: Output after saving the pair into the Session Storage:
![2.jpg]()