Cookies vs Local Storage vs Session Storage

In this article, we would look at the differences between the storage options and the use cases to apply each

The similarity between Cookies, Local Storage, And Session Storage used for?

Local storage, session storage and cookies are all storage options that are used in storing data. They are but useful and can be applied in different use cases.

Differences between Cookies, Local Storage, And Session Storage used for?

Local Storage

Local storage stores data without an expiration date and is only cleared via JavaScript or the browser cache. Amongst the three, the storage cap is the highest.

Session Storage

The Session Storage object holds data for a session only, which means that the information is stored before the window (or tab) is closed. There is never a transfer of data to the cloud. The cap for storage is greater than a cookie (at least 5MB).

Cookies

Cookies stores information that needs to be submitted for future requests back to the site. The expiry varies depending on the form and it is possible to adjust the expiry time from either the server-side or the client-side (normally from the server-side). Cookies are mainly readable on the server-side (can also be read on the client-side), localStorage and sessionStorage are readable only on the client-side. It needs to be less than 4KB in size. The syntax for storing, getting and removing data for the different storage methods

Storing Data

The syntax for Local Storage and Session Storage is the same. The only distinction is the localStorage variable and the variable in sessionStorage. The setItem functionality is used to set data using local storage or session storage. The setItem function takes two string parameters (name and value)

localStorage.setItem("name", "Favour");
sessionStorage.setItem("name", "Favour");

Cookies have a bit different syntax for storing data. You need to use document.cookie object and set that your cookie where name and value are separated with an equal sign.

document.cookie = "name=Favour";

Also, you can add when your cookies will expire. with the same format, the name and its value were entered, enter expires and its value. The syntax looks like:

 document.cookie = 
     "name=Favour; expires=Fri, 01 Jan 2021 00:00:00 GMT";

Getting Data

The syntax for getting data from local storage and session storage is the same, using the getItem method.

localStorage.setItem("name", "Favour");
localStorage.getItem("name"); //Favour
sessionStorage.setItem("name", "Favour");
sessionStorage.getItem("name");  // Favour

But for cookies it's different and there is no way to get an individual cookie. All cookies must be gotten at once.

document.cookie = 
      "firstName=Favour; expires=Fri, 01 Jan 2021 00:00:00 GMT";
document.cookie = 
      "lastName=Kelvin; expires=Fri, 01 Jan 2021 00:00:00 GMT";
document.cookie // firstName= Favour, lastName= Kelvin

Removing Data

The syntax for removing data in local storage and session storage is the same by using theremoveItem method. it takes in only one parameter

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

For cookies it's different, you need to give it a blank value and pass the expiration date.

document.cookie = "name=; expires=Thu, 14 Feb 2021 23:59:59 GMT";

Conclusion

As we have seen with the above examples local storage, cookies and session storage are used in different use cases. Now you know the difference you can make a decision based on your need 👍

Writing Tips with Favour