Difference Between Local Storage, Session Storage And Cookies

Anubhav Chaudhary
8y
68.5k
0
9

Article

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 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 lets 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 session 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 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 looks 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 value of session and local storage.

Did you find something? Yes, local storage is still available and will remain available until you clear your browsers 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 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 console.

Now open the Web Form on the browser and check it's 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 same browser easily.
Cookies only allow 4 KB of data to get stored but WebStorage (both local and session) provides near around 10 MB of space for data to get stored.

Up Next

Ebook Download

View all

Grid structure in css

Read by 1 people

Download Now!

Learn

View all