Difference between sessionStorage and localStorage

This article was originally written for my blog here -> https://easyontheweb.com/difference-between-sessionstorage-and-localstorage/

One of the most interesting concepts that impressed me a lot when I initially started with web development was that of localStorage and I totally loved what it was and what it could be used for. Then, I came to know about it’s sibling called sessionStorage which was equally as impressive so in this article we will be discussing what these are , what is the difference between sessionStorage and localStorage and how we can use both of them in our web applications.

The difference between them in one line is that sessionStorage data persists for one session (till the tab or window is closed) whereas the data for localStorage persists till it is removed from the browser by the user or the origin setting it.

We will start this article with sessionStorage , seeing what it is, how it works and examples where you could use it , then we will do the same for localStorage and in the last section we’ll compare them side by side and see which one to use when.

Web storage APIs
Both localStorage and sessionStorage are called web storage APIs that enable us to store some data in the browser of the user using our web application.

One thing to remember is that both theses web storage APIs – localStorage and sessionStorage store the data as key-value pairs of strings and nothing else. No other type is supported by them. You can think both of them as objects of key-value pairs of strings.

Both these web storage APIs can be extremely helpful in different scenarios to maintain some kind of cache or to run some code based on conditionals stored inside them etc.

Also, getting the data from the browser itself is much faster than say, fetching the same data from the server. Therefore, we can dump certain data into the browser of the user so that it is faster for us to fetch when we actually do need to do this.

Another thing about both these storage API’s is that they follow the same origin policy – that is they get stored per origin (to understand more about what an origin is please check this out -> https://easyontheweb.com/how-to-solve-cors-issue-in-nodejs/) . Therefore, your sessionStorage and localStorage are stored for your origin only and will not clash with some other origin’s data , ever.

sessionStorage
The first one we’ll be discussing is the sessionStorage. The first thing that you should keep in your mind is what a “Session” is – a session actually refers to the time spent by a user on your application without closing that particular window or tab.

Say, for example you open Facebook on your laptop and surf facebook. As soon as you go into facebook , one session has started for you. The duration of the session is for as long as we have that tab of facebook open on our browser. So, we can use sessionStorage to save information into the browser of the user just for the duration of that particular session.

Taking a leaf directly from the docs for what a session is :-

A page session lasts as long as the browser is open, and survives over page reloads and restores.
Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work.
Opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window.
Closing a tab/window ends the session and clears objects in sessionStorage.
One of the most confusing points is the third one which I personally did not expect when I started learning about sessionStorage, so do keep this one particularly in mind.

using sessionStorage
The API for sessionStorage is very simple (also, very similar to localStorage as we’ll see later). As mentioned earlier, all the data is stored as key-value pairs of strings, the first argument is a key (given in string form) and the second value is the data you want to store for that key (also given in string form). Just in case you want to store data other than strings – you can make use of the JSON.stringify method to convert your data into string format and later use JSON.parse to access it. in the original format.

Also, sessionStorage has much more memory capacity than cookies and is therefore preferred to them in this aspect. Still, the main concept to remember behind sessionStorage is the one of what a session actually is and how long will your data be persisted.

localStorage
The elder sibling for sessionStorage is localStorage. I personally use it much more than sessionStorage and it really is a very powerful mechanism to use.

Just like sessionStorage, localStorage is also a web storage API that helps us store data in the browser of the user. What changes in case of localStorage is that the data you store inside it does not get removed unless someone removes it – i.e, it will not get removed even if the browser get closed, refreshed or even if the user restarts his computer.

The data inside localStorage of the browser will only get removed if the browser is re-installed, the user manually removes the localStorage for the browser and your origin or if you yourself clear the localStorage for your origin on the user’s browser.

using localStorage
As you can see the syntax for localStorage is exactly the same as that of sessionStorage.

There actually is no difference between the two except for the time the data is persisted for. Also, the memory capacity for localStorage is 10 MB as compared to 5 MB for sessionStorage.

use cases for sessionStorage and localStorage
Even though there are numerous ways you can use the data in session or localStorage but one of my favourite things to do is save data that is particular to that user and that needs to be sent along with many requests – say something like a sessionId.

So, we only fetch the sessionId once from the server and save it in the localStorage / sessionStorage of the user and then in every request that needs a sessionId instead of fetching it again from the server, we can just get it from the browser memory itself and send it along in the request.

Another use case that I can think of, even though it is less recommended but I have seen being done is that to control your UI elements conditionally based on the values stored in these storages.

Again, there are a lot of use cases for them as fetching data from them is much faster than making another network call and you can basically use that to any advantage for yourself.

Difference between sessionStorage and localStorage
sessionStorage localStorage

1. Persistant for one session. 1. Persistant till removed.
2. 5MB storage. 2. 10 MB storage.
3. No old browser support. 3. No old browser support. As told earlier the major difference is just the time for which these two persist the data for. Rest, another point to note is that they are not supported on very old browsers so that needs to be taken care of.

Now that you have an understanding of these web storage APIs work, I hope you can find new use cases for them in your applications and use them to your advantage.

Also, if you want to become a web design master please check out this list of awesome resources I’ve put together -> https://easyontheweb.com/the-best-resources-for-html-and-css/