Cookies Vs LocalStorage Vs SessionStorage

Cookies vs LocalStorage Vs SessionStorage

One of the popular questions in web development interview is the difference between different types of storage. So I thought to write about it in simple words and in one place.

Cookies

A cookie is the special type of storage on a web browser which helps to maintain the state of the user. As we know that Http requests are stateless, to solve this problem cookies were invented. Cookies can store small user information and pass with every request and response helps the server to identify the user.
1. Cookies are supported in almost all browsers. Works with both HTML4 and HTML5.
2. Most of the browsers have around 4 kb memory for cookies.
3. Cookies are passed in request header with every request and response to the server.
4. We can set expiration time along with cookies.
5. Cookie-Based Authentication. Most modern applications use cookies for authentication to maintain the session of the user.
6. Session Management: User Login status, Cart Details, or Game Scores.
7. Personalization: User preferences, Themes, and other user Settings.
8. Tracking: Using and recording the behavior of the user. A/B Testing.

Disadvantages
If we have unnecessary cookies, it will be sent with all the requests and responses and hence slow down the application.

LocalStorage

With the invention of HTML5, browsers can now store data locally without impacting performance. Data stored does not pass with every request to the server.
1. There is no expiration time for local storage, the application can update or delete data anytime required.
2. Data stored in localStorage is not sent to the server with each request.
3. Data in localStorage is bound to the origin (domain/protocol/port triplet). This means different protocols or subdomains infer different storage objects, they can’t access data from each other.
4. Data in localStorage is shared between all tabs and windows from the same origin.
5. Data in localStorage remains after the browser restart and even OS reboots.
6. To share data we only have to be on the same origin (domain/port/protocol), the URL path can be different.

Disadvantages
1. Data once stored is persistent. It is the duty of the application to clean data after use.
2. Data stored in localStorage is not secured. Never store sensitive information to localStorage.

SessionStorage

Similar to local storage, HTML5 has session storage in which data expires with termination of the session.
1. Data is sessionStorage exists only within the current browser tab.
2. Another tab with the same page will have different storage.
3. Data in sessionStorage is shared between iframe in the same tab (assuming they come from the same origin).
4. Data in sessionStorage survives page refresh, but not closing/opening the tab.
5. Similar to localStorage, data in sessionStorage is bound to the origin (domain/protocol/port triplet). This means different protocols or subdomains infer different storage objects, they can’t access data from each other.
6. Similar to localStorage, for data sharing we only have to be on the same origin (domain/port/protocol), the URL path can be different.

Disadvantages
Data stored in sessionStorage is not secured. Never store sensitive information to sessionStorage.

--

--

--

Front End Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React Native Custom Toast with Zustand

Cross Site Scripting — Where automated tools may fail you.

Just completed my first React Native app, here is what I learnt

NestJS with Cassandra

COVID Update 5/19/22

Fetching Data in React using Hooks

React Hot Loader with Express or Web Dev Server

ERC-721 (NFT) Smart Contract Deployment— using Hardhat

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Puneet Ahuja

Puneet Ahuja

Front End Developer

More from Medium

How To Learn Javascript Faster And Effectively

Javascript: Function Expression vs Function Declaration

Scope There It Is

Why coding?