JavaScript Local Storage Vs Session Vs Cookies. Everything You Need To Know

Storing data in various storage options is very useful. But do you know which storage option is best for a particular use case? Let’s discuss what are the differences between each JavaScript data storage option.

What are Cookies, Local Storage And Session used for?

They all are used to store information on the user’s browser which can be accessed even after navigating to new pages on your site.

This data is also saved to the user’s exact browser they are using so if they have your site open in any browser, it will only save the data to that browser on the device they are currently on.

This means if you open another site later in a different browser the data will no longer be there.

Storage Limit

As you may guess each JavaScript storage method has a maximum size of data you can store with it. Local storage stores up to 10 megabytes and sessions – up to 5 megabytes and then cookies has a capacity of only 4 kilobytes.

Access

Like different capacity, each storage method has different levels of accessibility.

Local Storage is accessible in any window or tab that is open to your site. This means if you store some data in local storage on one tab of your browser that same local storage data will be available on all other tabs and windows you have open to that.

But in session storage, data is only available in the current tab you set the session storage data in. Session storage is tied to the particular session and each tab of your browser is its own session.

And then cookies are very similar to local storage in the sense that they are accessible from any window or tab, but cookies are also accessible on the server. Every request you make to your backend server, all your cookies are also sent along. So they are also used for authentication tasks.

Expiration

Local storage is very useful as it’s data never expires until you manually remove it. While sessions will expire as soon as you close the tab you are in because data is only available to a particular session which is equivalent to a tab.

Cookies on the other hand are unique in the sense that you can manually set the expiration date for them.

Syntax

Here we will take a look at the syntax of different storage methods.

Storing Data

Local Storage and sessions has the same syntax. The only difference is the localStorage variable and sessionStorage variable.

In order to set data using local storage or session, you use setItem function.

localStorage.setItem("name", "Paul");

sessionStorage.setItem("name", "Paul");

This setItem function takes two string parameters. The first parameter is the name and second parameter is value.

Cookies have slightly different syntax. You need to access the document.cookie object and set its values.

document.cookie = "name=Paul";

For storing data in a cookie, you need to use document.cookie value to a string where name and value are separated by an equal sign.

In order to set an expiration date, we need to pass the expires key to a UTC date value. We also need to make sure we separate the expires key from our name key with a semicolon.

document.cookie = "name=Paul; expires=Fri, 01 Jan 9999 00:00:00 UTC";

Getting Data

In order to get data from local storage and session storage, the syntax is the same using getItem method except for
localStorage or sessionStorage variable.

localStorage.setItem("name", "Paul");
localStorage.getItem("name"); //Paul

sessionStorage.setItem("name", "Paul");
sessionStorage.getItem("name");  // Paul

But there’s no way to get an individual cookie. The only way to get cookies is to get all the cookies at once.

document.cookie = 
      "name=Paul; expires=Fri, 01 Jan 9999 00:00:00 UTC";
document.cookie = 
      "lastName=Doe; expires=Fri, 01 Jan 9999 00:00:00 UTC";
document.cookie // name= Rohan, lastName= Shakya

Removing Data

The syntax for removing data is also very similar in local storage and session storage by using removeItem method.

localStorage.removeItem('name');
sessionStorage.removeItem('name');

It takes a single parameter which is the name of the key-value pair to remove the data. But for a cookie to be removed you need to set a cookie again but give it a blank value and pass expiration date.

document.cookie = "name=; expires=Thu, 31 Dec 9999 23:59:59 UTC";

Conclusion

Now you know about three different data storage methods. And how to create and remove them. Hope you found this article informative.