Difference Between Local Storage, Session Storage And Cookies

Introduction

In this article, I'll tell you about the difference between Session Storage, Local Storage, and Cookies.

Different kind of storage space is available for our data on the client as well as server-side, we can choose any of them according to our need and level of transparency. Among these storage spaces, three are Session Storage, Local Storage, and Cookie.

Among these three, Session and Local Storage comes under Web Storage, so first let's compare and see the difference between them.

Session Storage and Local Storage

I had created a sample application to show the difference.

I just created a .NET application in which an HTML5 page is added, and on that page, script tag is added so that we can assign some values under the two storage.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
</script>
</head>
<body>
</body>
</html>

After this, I added single values in both sessions and local storage.

<script>
sessionStorage.setItem("sessionData", "I am set in session storage.");
localStorage.setItem("localData", "I am set in local storage.");
</script>

Now just simply run the application and on browser open the console. In the console, you can find the values in this simple way,

You can see that both the values are available, up to here everything is fine and normal, even both look the same. But now open any other page of the application and again check the console.

Did you find the value in both of them! NO.

Here comes the difference, session storage value will persist for a particular page only and will not be available on any other page but local storage value once entered can be accessed on any page.

Still, one more thing to come, just close the browser and open it again. Now again go to any other page and check the console for the value of the session and local storage.

Did you find anything? Yes, local storage is still available and will remain available until you clear your browser's history or clear it from JavaScript.

So, till now we have seen the difference between session and local storage and clearly local storage is proved as more helpful (depend on the case) than session storage.

Now let's move towards local storage and cookies.

Local Storage and Cookies

I am adding a Web Form to my application and just provide some controls on it.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="StorageinHTML.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<label>Please Enter Your Name:</label>
<asp:TextBox runat="server" ID="txtName"></asp:TextBox>
<br />
<label>Please Enter Surname:</label>
<asp:TextBox runat="server" ID="txtSurName"></asp:TextBox>
<br />
<label>Please Enter Your Mobile No. :</label>
<asp:TextBox runat="server" ID="txtMobile"></asp:TextBox>
<br />
<asp:Button runat="server" Text="Submit" OnClick="Unnamed_Click" />
</div>
</form>
</body>
</html>

I had created a submit button and on its click event, I had put a debugger.

Now let's move to the HTML5 page and add a cookie using JavaScript.

<script>
sessionStorage.setItem("sessionData", "I am set in session storage.");
localStorage.setItem("localData", "I am set in local storage.");
document.cookie = "Available on both client and server side";
</script>

Now run the application and open the HTML page, here open the console so that you can check the values.

You can see all the values are available on the console.

Now open the Web Form on the browser and check it's the console.

Here you can see that both Local Storage and Cookies are having the values but as already explained Session Storage has lost the value.

Now click on the submit button and go to the debugger, here if you open the Quick Watch Window and check for Cookie using Request. Cookies then you will see that our cookie value is available over here but session storage or local storage value can't be used here.

So cookie value is available on both client-side as well as on server side but there are some more differences between these two like the following:

Local Storage Value can be shared between multiple windows of the same browser easily.
Cookies only allow 4 KB of data to get stored but WebStorage (both local and session) provides nearly around 10 MB of space for data to get stored.

Summary

In this article, we learned about the Difference Between Local Storage, Session Storage, And Cookies.

34 Comments

Join the conversation! Your thoughts help the community grow.

Dara Sroksrae6y ago
Great explanation.Thank you so much
Hana Aanaa7y ago
Great explanation. Thank you
Bg Bhuvaneswari8y ago
Thanks alot.... Understood best....
Animesh Ghosh9y ago
Very good explanation and understood the difference
vikash bajiya9y ago
Very good example to understand local storage, session storage and cookies
Soumalya Das10y ago
Good example for understanding
Karthik Elumalai10y ago
Very well explained and easy to understand..Thanks for this..:)
Prasanna Murali10y ago
Nice one....
Bhuvanesh Mohankumar10y ago
Good one...
Asfend Yar10y ago
good
Anubhav Chaudhary10y ago
Thanks Abhishek Mishra and Sabyasachi Mishra
Sabyasachi Mishra10y ago
Nice one
Abhishek Mishra10y ago
very informative article.
Anubhav Chaudhary10y ago
Thanks Senthil Kiumar and Jainish Shah
Jainish Shah10y ago
Very Informative article
Senthil Kiumar10y ago
Thanks nice article
Anubhav Chaudhary10y ago
Thanks to all those who have read the article.
Ankit Bansal10y ago
Thanks for sharing
Santhakumar Munuswamy10y ago
Thanks for nice share
Anubhav Chaudhary10y ago
Thanks All :)
Ankur Mistry10y ago
nice share
Maruthi Palllamalli10y ago
Informative article. Small doubt in your article, What happen if my browser disable cookies ? and It is working at page level or application level ?
- Anubhav Chaudhary10y ago
  In that a case nothing will be saved, and your second question's ans is in the article itself :)
Gowtham K10y ago
Good One, thanks for sharing it
Arul R10y ago
Nice Share
Anubhav Chaudhary10y ago
It feels really good when people first read the article and then comment on it, no matter if they are appreciating or criticizing, at least they read the article and make time spend by author worthy.
Anubhav Chaudhary10y ago
Thanks All
Gowtham Rajamanickam10y ago
Good article
Yashwant Vishwakarma10y ago
Nice article, thanks for sharing !!
Kumaresh Rajalingam10y ago
Good one
Nanddeep Nachan10y ago
Cleanly explained, Thanks!
Gaurav Gupta10y ago
Good Explanation. Keep it up.. :)
Pankaj Kumar Choudhary10y ago
Nice Explain Anubhav .......
Humayun Kabir Mamun10y ago
Nice...