Basic Difference Between Local Storage and Session Storage in HTML 5

Introduction

HI. This article explains what the basic difference of HTML 5 local storage and session storage is in a practical way. I hope you will like it.

If you are new to the term local storage, I recommend you to read my article here.

A basic scenario where you can use

If you need to carry a value throughout your application or throughout your pages, you can use local storage. For example, we can store a logged-in username in local storage that we may need to access in all the pages. I strongly recommend not to store any secured data (for example a “password”) in local storage.
In some scenarios, we may need to set a key element depending on the pages we have in the application. For example, if we need to store the page name (any key element that may be different).

So let's start

Here is my application I have added two HTML5 pages.

In HtmlPage1.html I have set local storage and session storage, now I am trying to access that in HtmlPage2.html. Please see the following source.

HtmlPage1.html

HtmlPage2.html

When you run the first page, in the browser console you will see as in the following image.

Local Storage

Session Storage

Now it is time to run the second page.

Once you run that please check in the console. You can see as follows.

Local storage

Session storage

Please note that session storage is null. You can see the session storage only if you set it in that running page. I hope you like it.

Adding points as suggested by Afzaal Ahmed Zeeshan.

Session storage stays active until the session stays; the browser is active, a user is working, etc. Once the session is cleared they are cleared

Please provide your valuable suggestions and comments. Thanks in advance.

Kindest Regards,

Sibeesh Venu

Join the conversation! Your thoughts help the community grow.

Sibeesh Venu11y ago
Afzaal Ahmad Zeeshan Thank you so much. Yes You are right. If you do not mind ,Shall I add this points as conclusion?
- Afzaal Ahmad Zeeshan11y ago
  Why not? Feel free to add this as the conclusion Sibeesh. :)
Afzaal Ahmad Zeeshan11y ago
Good points have been made by you Sibeesh. But I would like to add some more details to this one; hopefully you won't mind. Actually Session storage stays active until the session stays; browser is active, user is working etc. Once the session is cleared they are cleared. So this would have been made as the conclusion... Page visit, or staying on the page doesn't matter, it is Session that matters for sessionStorage and in case of localStorage either user or your application itself removes the data. :)