Hello everyone! Welcome to my third blog. In this blog I am going to talk about the three main ways to store data inside the browser are Local Storage, Session Storage and Cookies. This blog will mainly deal with the basic difference between these three and as well as how to use them.

Before I start talking about the differences between them, lets first talk about the similarities that they possess. All three of them are actually stored on the user's browser that they are using. So, if a user has stored data in Chrome then that will not be visible in Firefox or any other browser. It is browser independent. Also, users do not share cookies in localStorage between them.

Local Storage and Session Storage are somewhat similar to each other whereas Cookies is completely a different and older than the other two. Cookies can store a very small amount of information in KB whereas Local Storage and Session Storage store 10MB and 5MB respectively. As cookies are slightly older so it supports HTML4.

We can access Local Storage and Cookies in any tab meaning if we open two tab then also we can access both of them. This is not the case with Session Storage. It stores in the same tab. The expiry of Cookies is manually set whereas for Session Storage once the window/tab is closed it disappears. For Local Storage it never really expires.

Local Storage

localStorage is a way to store data on the client’s computer. It allows the saving of data in key/value pairs in a web browser. It can only be accessed via JavaScript, and HTML5. However, the user has the ability to clear the browser data/cache to erase all local storage data.

Here is a code snippet of how we set, get and remove item from local storage :

//For setting the data: 
localStorage.setItem('name', ' data to be stored')

//For getting the data:
localStorage.getItem('name')

//For removing the data:
localStorage.removeItem('name')

Session Storage

It is similar to local storage i.e we can store data in key/value pairs. It stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. Data is never transferred to the server. It can only be read on client-side. If we open multiple tabs/windows with the same URL it creates a sessionStorage for each tab/window.

Here is a code snippet of how we set, get and remove item from session storage :

//For setting the data: 
sessionStorage.setItem('name', ' data to be stored')

//For getting the data:
sessionStorage.getItem('name')

//For removing the data:
sessionStorage.removeItem('name')

If we store data with the same key, then it overrides the previous one.

Cookies

It stores data that has to be sent back to the server with subsequent XHR requests. Its expiration varies based on the type and the expiration duration can be set from either server-side or client-side. Cookies can be made secure by setting the http only flag set as true for that cookie. This prevents client-side access to that cookie.

Code snippet of how to store data using Cookies

document.cookie = 'name=anyName; expires=' + newDate(999, 0, 1).toUTCString()

Thank you for reading this blog .

Have a good day :)