Post
Ask Question

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.
  1. <!DOCTYPE html>      
  2. <html xmlns="http://www.w3.org/1999/xhtml">      
  3. <head>      
  4.     <title></title>      
  5.     <script>      
  6.     </script>      
  7. </head>      
  8. <body>      
  9.       
  10. </body>      
  11. </html>     
After this, I added single values in both sessions and local storage.
  1. <script>    
  2.     sessionStorage.setItem("sessionData", "I am set in session storage.");    
  3.     localStorage.setItem("localData", "I am set in local storage.");    
  4. </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.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="StorageinHTML.WebForm1" %>    
  2.     
  3. <!DOCTYPE html>    
  4.     
  5. <html xmlns="http://www.w3.org/1999/xhtml">    
  6. <head runat="server">    
  7.     <title></title>    
  8. </head>    
  9. <body>    
  10.     <form id="form1" runat="server">    
  11.         <div>    
  12.             <label>Please Enter Your Name:</label>    
  13.             <asp:TextBox runat="server" ID="txtName"></asp:TextBox>    
  14.             <br />    
  15.             <label>Please Enter Surname:</label>    
  16.             <asp:TextBox runat="server" ID="txtSurName"></asp:TextBox>    
  17.             <br />    
  18.             <label>Please Enter Your Mobile No. :</label>    
  19.             <asp:TextBox runat="server" ID="txtMobile"></asp:TextBox>    
  20.             <br />    
  21.             <asp:Button runat="server" Text="Submit" OnClick="Unnamed_Click" />    
  22.         </div>    
  23.     </form>    
  24. </body>    
  25. </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.
  1. <script>    
  2.     sessionStorage.setItem("sessionData", "I am set in session storage.");    
  3.     localStorage.setItem("localData", "I am set in local storage.");    
  4.     document.cookie = "Available on both client and server side";    
  5. </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:
  1. Local Storage Value can be shared between multiple windows of the same browser easily.
  2. 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. 


Similar Articles