Local Storage & Session Storage

The local storage and session storage, both, are a type of storage management systems, in simple terms, they are used to store any value on the browser. In simpler terms, a local storage or a session storage is just a memory of a browser that it has for you to store anything that you want in its own memory/storage. Well, it’s not like you can store A LOT of data! There’s a limit to it…

But first let’s go a little deep into their primary differences:

Session storage :

• Again, used for storing data on a browser,

• Has a limit of about 5 mb (may vary browser to browser)

• IMPORTANT : any value/data stored in session storage is deleted/removed when either the active tab (browser tab) is closed or entirely the browser is closed. Meaning, if you close the active tab of the browser in which there was a page opened wherein you were seeing some stored data in the browser’s memory/storage, now, once you close that tab and move to another tab (accessing the same page but on a different tab now), that data you stored in the session storage will be GONE! And obviously, if you close the browser itself, then in that case also, the data is GONE!!! NOT PERSISTANT.

Below is a JavaScript code for setting a data in session storage using its method called ‘sessionStorage.setItem(‘key’, ‘value’). Key will be your unique identifier for the corresponding value stored.

sessionStorage.setItem('userName', 'hehe LOL'); //here the key is userName and value is hehe LOL (the name of the user)

//so above we have stored a data by the name of 'userName' whose value is 'hehe LOL'
//Now for getting the data, use sessionStorage.getItem(keyName);

const valueFromSessionStorage = sessionStorage.getItem('userName');
console.log('the value obtained from the session storage is : ', valueFromSessionStorage); //the value obtained from the session storage is hehe LOL

Local Storage :

• Again, used for storing data on a browser,

• Has a limit of about 5 mb - 10 mb (may vary browser to browser)

• IMPORTANT : Unlike its brother or maybe sister (session storage), it’s data is NEVER deleted/removed!!! Yaaaay!! UNLESS EXPLICITLY REMOVED BY USER OR BY YOU (the developer). Moreover, even if you switch tabs or close the browser and even you shut down or restart your PC (yeah, you can try :-) ) The data remains saved there… PERSISTANT.

Below is a JavaScript code for setting a data in local storage using its method called ‘localStorage.setItem(‘key’, ‘value’). Key will be your unique identifier for the corresponding value stored.

localStorage.setItem('userName', 'hehe LOL'); //here the key is userName and value is hehe LOL (the name of the user)

//so above we have stored a data by the name of 'userName' whose value is 'hehe LOL'
//Now for getting the data, use localStorage.getItem(keyName);

const valueFromLocalStorage = localStorage.getItem('userName');
console.log('the value obtained from the local storage is : ', valueFromLocalStorage); //the value obtained from the local storage is hehe LOL