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.
