In other version of HTML we store data on client machine by using concept of cookies which is not suitable for large data. With the concept of localStorage we will store large volume of data on client machine. Html5 offers two ways to store data on client machine.
- localStorage: When we stores data on client using LocalStorage mechanism then there is no time limit to lost data. We are able to see that data after one day, or one month or one year.
- sessionStorage:When we store data on client using sessionStorage mechanism then saved datas are available until sessions are expire.
Following example will be displayed use of localStorage object.
Design a user interface for application by using following code snippet.
<table>
<tr>
<td>
<div id="div1">
<textarea id="txtSubmitContent" style="width:200px;height:200px" rows="16" ></textarea> <br />
<input type="button" value="Save Content In LocalStorage" onclick="storeData()" />
</div>
</td>
<td>
<div id="div2">
<textarea id="txtGetContent" style="width:200px;height:200px" rows="16"></textarea> <br />
<input type="button" value="Get Content From LocalStorage" onclick="getData()" />
</div>
</td>
</tr>
</table>
This will create a user interface which looks like following.
Create a java script method named storeData() and called this method on click event of Save Content in LocalStorage button.
function storeData() {
localStorage.data = txtSubmitContent.value;
}This method will store data on client system.
Create a java script method named getData() which will display data on second text box. This will display storage data.
function getData() {
txtGetContent.value = "";
if (localStorage.data)
txtGetContent.value = localStorage.data;
else
txtGetContent.value="No Local Data Found."
}Output of following code snippet is as follows
Following example will be displayed use of sessionStorage object
Here we will see that session storage will save data until session of users get expired. Replace all localStorage value with sessionStorage value and execute program to see output.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML>
<html>
<head>
<title>Html5 Learning</title>
<script type="text/javascript">
function storeData() {
sessionStorage.data = txtSubmitContent.value;
}
function getData() {
txtGetContent.value = "";
if (sessionStorage.data)
txtGetContent.value = sessionStorage.data;
else
txtGetContent.value = "No Local Data Found."
}
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="div1">
<textarea id="txtSubmitContent" style="width:200px;height:200px" rows="16" ></textarea> <br />
<input type="button" value="Save Content In SessionStorage" onclick="storeData()" />
</div>
</td>
<td>
<div id="div2">
<textarea id="txtGetContent" style="width:200px;height:200px" rows="16"></textarea> <br />
<input type="button" value="Get Content From SessionStorage" onclick="getData()" />
</div>
</td>
</tr>
</table>
</body>
</html>
Output of following code snippet is as follows
Anonymous User
22-Jul-2019Thanks for the informative post.