How data store in localStorage and sessionStorage ?

Sourav.Kayal
Posted by in HTML 5 category on for Beginner level | Points: 250 | Views : 5865 red flag

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.

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)