Store data in localStorage and sessionStorage and access using key
How data store in localStorage and sessionStorage ?
In this article we will try to understand the data storage
mechanism in localStorage and sessionStorage. We know that HTML5 supports those
two types of storage to store user’s data. And we can use them even when offline.
So, that this feature of HTML5 is called offline storage.
The question is ”How data get store in those type of storage”.
Answer is “It stored in key/value pair”. If you are C# developer , then you
might know Dictionary storage. It stores data in key/value pair.
We will see, how to store data using key and process them in
pair.
Store data in localStorage and process by key.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScriptTest.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function TestStorage() {
if (typeof (Storage) !== "undefined") {
//Store data in localStorage
localStorage.name = "Sourav";
localStorage.surname = "Kayal";
//Remove data from localStorage
localStorage.removeItem("surname");
alert(localStorage.surname);
}
else
alert("Browser does not support storage");
}
</script>
</head>
<body onload="TestStorage()">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
In the above example we have inserted two data(with key name
and surname) in localStorage. Then we
are removing one item using removeItem() method, it takes the key value and make
remove the corresponding value of the string. Now we are trying to retrieve value
using deleted key. Here is the output.
It’s showing “undefined” means the value is not present in
localStorage.
To clear all item from localStorage we can use localStorage.clear(); method.
Store data in sessionStorage and process by key.
sessionStorage is very similar with localStorage and just the
data get lost when user close the browser. Try to understand below code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScriptTest.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function TestStorage() {
if (typeof (Storage) !== "undefined") {
sessionStorage.name = "Sourav ";
sessionStorage.surname = "Kayal";
alert("Number of data in Session:- " + sessionStorage.length)
sessionStorage.clear();
alert("Number of data in Session:- " + sessionStorage.length)
}
else
alert("Browser does not support storage");
}
</script>
</head>
<body onload="TestStorage()">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
At first we are storing two data in sessionStorage and then
we are detecting number of data using length property of localStorage object
and then we are clearing data from localStorage and hence it’s showing 0 ,
means there is no data in localStorage.
Here is output after storing data.
Output after clearing data
Conclusion:-
In this article we have seen how to make operation in
localStorage add sessionStorage in HTML5. Hope you have enjoyed it.