Table of contents
1.
Introduction
2.
Cookies
3.
Web Storage
3.1.
Local Storage
3.2.
Session Storage
4.
Localstorage vs Sessionstorage vs Cookies
5.
Frequently Asked Questions
5.1.
Explain CSI.
5.2.
Mention a few uses of Browser Storage methods.
5.3.
What are the three parameters based on which we differentiate Storage methods?
5.4.
Is storing tokens in cookies or localstorage or sessionstorage necessary?
6.
Conclusion
Last Updated: Mar 27, 2024
Hard

What is the difference between Local Storage, Session Storage, and Cookies?

Author Rupal Saluja
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

We know HTTP protocol is important in providing efficient communication between client and server. However, it is a stateless protocol. As the name suggests, the stateless protocol does not save states. That means this protocol does not track or store information of either client or server. Each request or response is isolated from the other. It led to a problem: what if you want to remember any response or request?

The solution was to track the required information. Have you heard of Cookies? They were the first to arrive. The size of the Cookies was very small. Thus, Cookies were restrictive. With the arrival of Html5, we got several options to cache and store information. The major category under which we place these options is Web Storage. Web Storage is further divided into two categories: Local Storage and Session Storage.

localstorage vs sessionstorage vs cookies

    LOCALSTORAGE VS SESSIONSTORAGE VS COOKIES

We will briefly discuss Cookies, Local Storage, and Session Storage. Then, we will form a comparison discussing localstorage vs sessionstorage vs cookies.

Also See, Interpolation in Angular

Recommended Topic, Cognizant Eligibility Criteria

Cookies

How many times have you visited a website and seen the following popup?

“This website uses cookies to store your information.”

You might have lost count. A cookie is used to store session-related details of a user. This stored information helps to enhance user experience and engage them whenever they visit the same website again. It is a mechanism to store client and server-side data as key-value pairs on browsers.

notion of cookies

Previously, every request made to a server was unique. As a result, every response automatically becomes unique. As traffic on browsers increased exponentially, this seemed illogical and impractical; cookies were the solution.

We can set a cookie using an HTTP Header given below.

Set-Cookie: vanilla_cookie=its_awesome

 

You can use the below Javascript code to create cookies with ‘create.cookie’.

document.cookie = "vanilla_cookie=its_awesome";
document.cookie = "choco_pastry=its_yummy";
console.log(create.cookie);

 

Cookies are associated with websites. If any website has a particular cookie, you won’t experience the same cookie on other websites. There are two types of cookies.

Session Cookies

Session cookies are sent by the browser every time you make a request. These cookies are generated on the client side. They last only for a session, hence known as session cookies.

Persistent Cookies

As the name suggests, persistent cookies stay for a longer period. These cookies are generated on the server side and get stored for a website after it has received multiple requests from the same server.

However, cookies come with some limitations too. They have very few use cases, small data storing capacity, and can be restrictive sometimes.

Cookies come with an expiry date stamp which can be marked as both an advantage and a disadvantage. You can use the following Javascript code to set an expiration date for the cookies.

Set-Cookie: xyz_uuid=abcd; Expires=Thu, 21 Oct 2100 11:59:59 GMT; Secure; HttpOnly

 

An example client-side screen of cookies is pasted below.

An example client-side screen of cookies

Web Storage

Web Storage has similar principles to Cookies. However, it overcomes the limitations of Cookies, such as very few use cases and small data storing capacity. It consists of JavaScript APIs that permit us to store data on the user’s machine and retrieve it whenever required.

There can be several reasons why we should store data in a browser. The most important reason is that the data stored locally in the user’s browser is immediately available. The furious availability of data enhances performance. In contrast, the remotely stored data is sent from the server to the client. This takes time, and we cannot always wait for it. There are two categories of Web Storage which are explained below.

Local Storage

This Web Storage method helps us store data on the client’s computer without expiration. The data is stored in the form of key-value pairs to make their accessibility faster. It is removed from the system only when the user manually deletes it by clearing the browser memory. We can access it only through JavaScript or Html5.

notion of local storage

The data in Local Storage behaves differently based on the protocol in the document. If we load the site over HTTP, it returns a different object than the one returned when we load it over HTTPS. We cannot assume the behavior as the URL requirements remain unclear.

You can use four methods to set, retrieve, remove, and clear the data.

  • setItem() method

Using this method, you can set the data in the local storage. The two parameters used to set an item are key and value. The syntax is given below.

localStorage.setItem(key, value);

 

  • getItem() method

Using this method, you can get the value already set in the record. The only parameter to retrieve the data is the key. The syntax is given below.

localStorage.getItem(key);

 

  • removeItem() method

Using this method, you can remove any particular value from the record. The only parameter required to use this method is the key. The syntax is given below.

localStorage.removeItem(key);

 

  • clear() method

This method can clear all the records stored in the memory. The syntax is given below.

localStorage.clear();

 

An example screen of the local storage path is pasted below.

 local storage example

Session Storage

The Session Storage method is quite similar to the Local Storage method. The only difference is that it stores data for only one session, thus known as Session Storage. The stored data is lost as soon as the browser is closed. The session is closed, and session objects get cleared. A fresh session is created every time a tab or window is opened. However, when you duplicate a tab, the Session Storage tab from the previous tab gets copied to the new tab.

notion of session storage

The data in Session Storage behaves differently based on the protocol in the document. If we load the site over HTTP, it returns a different object than the one returned when we load it over HTTPS. We cannot assume the behavior as the URL requirements remain unclear.

You can use four methods to set, retrieve, remove, and clear the data.

  • setItem() method

Using this method, you can set the data in the session storage. The two parameters used to set an item are key and value. The syntax is given below.

sessionStorage.setItem(key, value);

 

  • getItem() method

Using this method, you can get the value already set in the record. The only parameter to retrieve the data is the key. The syntax is given below.

sessionStorage.getItem(key);

 

  • removeItem() method

Using this method, you can remove any particular value from the record. The only parameter required to use this method is the key. The syntax is given below.

sessionStorage.removeItem(key);

 

  • clear() method

This method can clear all the records stored in the memory. The syntax is given below.

sessionStorage.clear();

An example screen of the session storage path is pasted below.

session storage example

You can also read about mock interview.

Localstorage vs Sessionstorage vs Cookies

Now that we know about the Storage system in detail, we will analyze localstorage vs sessionstorage vs cookies using the following table.

Localstorage vs Sessionstorage vs Cookies

Frequently Asked Questions

Explain CSI.

CSI stands for Container Storage Interface. It is an initiative to combine all the storage interfaces of Container Orchestrator Systems such as Mesos, Kubernetes, Docker Swarm, etc.

Mention a few uses of Browser Storage methods.

A few uses of Browser Storage methods are Persisting site activities, Personalizing site preferences, Storing login state, Improving website performance, and Reducing back-end server requests.

What are the three parameters based on which we differentiate Storage methods?

The three parameters based on which we differentiate Storage methods are Storage limit, Accessibility, and Expiration.

Is storing tokens in cookies or localstorage or sessionstorage necessary?

No, it is not necessary to store tokens in cookies or localstorage or sessionstorage. However, it is advisable to store tokens only in localstorage because of its high storage capacity.

Conclusion

In a nutshell, we discussed the transition of browsing from its stateless form to cookies and Web storage. We learned several aspects of Cookies, Local Storage, and Session Storage individually and analyzed localstorage vs sessionstorage vs cookies.

Recommended Reading:

Difference Between Structure and Union

We hope the above discussion helped you understand localstorage vs sessionstorage vs cookies and can be used for future reference whenever needed. To learn more about localstorage vs sessionstorage vs cookies, you can refer to blogs on localstorage vs sessionstorage vs cookies- use cases and accessibilityConfiguring the Session CookiesCookie Authentication, and Session Tracking.

Visit our website to read more such blogs. Make sure you enroll in our courses, take mock tests, solve problems, and interview puzzles. Also, you can pay attention to interview stuff- interview experiences and an interview bundle for placement preparations. Do upvote our blog to help fellow ninjas grow.

Happy Coding!

Live masterclass