LocalStorage VS SessionStorage VS Cookie

	Cookies	LocalStorage	SessionStorage
Capacity	4kb	5-10 MBs (Browser Dependent)	5 MBs
Accessibility	All windows	All windows	Private to tab
Expiration	Manually Set	Never expires	On tab close
Passed in request	Yes	No	No
Storage	Browser and Server	Browser Only	Browser Only

Application

As you can seen main difference from above table. Here is the application of each storage type:

1. LocalStorage - Usually data never expires and must stores non-sensitive data like user preference, application state etc.
2. SessionStorage - Data is private to the tab and expires as soon as you close the window or tab. Suitable for storing temporary data that only needs to persist while a user navigates a single tab (e.g., form data before submission).
3. Cookie - The storage capacity is very less and the data might require by the server like auth token or user preference.

Syntax

Cookie🍪

// below snippet will set username as key 🔑
// Johndoe as value 🔓
// will set expiry date for the cookie which is 31 Dec 2024
// path (cookie available to entire website)
// if no path specified then cookie will be available to that particular site which created that cookie
// you can delete the cookie by setting🧰 the date that already expired (any previous date)
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

reading cookie

console.log(document.cookie) // Outputs all cookies🍪 as a string

Session Storage📮

sessionStorage.setItem('sessionData', 'temporaryValue');
let sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData); // Outputs: temporaryValue

removing and clearing

sessionStorage.removeItem('sessionData'); // it will only remove particular key
sessionStorage.clear(); // clean the whole storage

Local Storage🧰

Most comman storage type and all the functions are similar to the session type.

//set item
localStorage.setItem('username', 'JohnDoe');
// get itme
let username = localStorage.getItem('username');
console.log(username); // Outputs: JohnDoe
// remove item with key-value
localStorage.removeItem('username');
// reset store
localStorage.clear();

How to see storages in Browser (chrome)

LinkedIn 🔗 ❤