JavaScript Tutorial in Hindi #33 | Local Storage vs Session Storage vs Cookies (2025)

✅ 1. What is Local Storage?

  1. Web storage that stores data locally in the browser with no expiration.
  2. Data persists even after closing and reopening the browser.
  3. Stores data as key-value pairs (strings only).
  4. Size limit: about 5-10 MB depending on the browser.

✅ 2. What is Session Storage?

  1. Similar to Local Storage, but data is stored only for the current browser tab/session.
  2. Data is cleared when the tab or browser is closed.
  3. Also stores key-value string pairs.
  4. Size limit similar to Local Storage.

✅ 3. What are Cookies?

  1. Small pieces of data stored by the browser.
  2. Sent to the server with every HTTP request (unlike Local/Session Storage).
  3. Can have expiration dates (can be set to expire).
  4. Mainly used for authentication, tracking, and session management.
  5. Size limit: about 4 KB per cookie.

✅ 4. Key Differences

FeatureLocal StorageSession StorageCookies
LifetimePermanent (until cleared)Tab/session onlyCan be set to expire
Data sent to serverNoNoYes, with every HTTP request
Storage size5-10 MB5-10 MB~4 KB per cookie
AccessibilitySame origin onlySame origin, current tabSame origin, sent to server


✅ 5. Practical Examples

Local Storage

js
CopyEdit
// Save data
localStorage.setItem('username', 'Mohit');

// Read data
const name = localStorage.getItem('username');
console.log(name); // Mohit

// Remove data
localStorage.removeItem('username');

// Clear all
localStorage.clear();

Session Storage

js
CopyEdit
// Save data
sessionStorage.setItem('sessionID', '123456');

// Read data
console.log(sessionStorage.getItem('sessionID'));

// Data cleared when tab is closed

Cookies

js
CopyEdit
// Set cookie (expires in 7 days)
document.cookie = "user=Mohit; max-age=" + 7*24*60*60 + "; path=/";

// Read cookies
console.log(document.cookie);

// Delete cookie (set max-age to 0)
document.cookie = "user=; max-age=0; path=/";