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 |
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.

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.
