What browser storage options do you know? Tell about their differences.

Brief Answer

Main browser storage options:

localStorage — permanent storage, data doesn’t disappear 💾
sessionStorage — temporary storage, until tab closes 🕐
Cookies — small data, automatically sent to server 🍪
IndexedDB — full database in browser 🗄️

// localStorage — forever
localStorage.setItem('key', 'value');
 
// sessionStorage — until tab closes
sessionStorage.setItem('key', 'value');
 
// Cookies — with auto-send
document.cookie = 'key=value';
 
// IndexedDB — full DB
const db = indexedDB.open('myDB');

Full Answer

Browser storage options — like different types of boxes for storing things. Each has its expiration date and purpose! 📦

localStorage — home safe

Stores data forever, until you delete it:

// Save forever
localStorage.setItem('theme', 'dark');
 
// Even after computer restart data remains
console.log(localStorage.getItem('theme')); // 'dark'
 
// Volume: 5-10 MB

sessionStorage — jacket pocket

Stores data only during session:

// Save until tab closes
sessionStorage.setItem('formStep', '2');
 
// After tab closes everything disappears
console.log(sessionStorage.getItem('formStep')); // '2' (while tab open)
 
// Volume: 5-10 MB

Cookies — notes for server

Small data that automatically flies to server:

// Sent with every request to server!
document.cookie = 'userId=123; path=/; expires=Fri, 31 Dec 2024 23:59:59 GMT';
 
// Very small volume: 4 KB
// Many cookies = slow requests!

IndexedDB — home library

Full database in browser:

// Can store lots of data (up to GB!)
// Works asynchronously
// More complex to use
 
const request = indexedDB.open('myDatabase', 1);
// For complex data structures

Comparing All Storages

Storage	Volume	Lifetime	Auto-send	Complexity
localStorage	5-10 MB	Forever	No	Simple
sessionStorage	5-10 MB	Until tab closes	No	Simple
Cookies	4 KB	By expiration date	Yes	Medium
IndexedDB	Up to GB	Forever	No	Complex

When to Use What

localStorage

// ✅ Permanent settings
localStorage.setItem('language', 'en');
localStorage.setItem('theme', 'dark');

sessionStorage

// ✅ Temporary form data
sessionStorage.setItem('draft', 'draft text');

Cookies

// ✅ Auth tokens (careful!)
document.cookie = 'token=abc123';

IndexedDB

// ✅ Large data volumes
// Offline apps, games, editors

Common Mistakes

Storing large data in cookies

// ❌ Bad — cookies sent with every request
document.cookie = 'bigData=very_large_data'; // Slows site!
 
// ✅ Better — use localStorage
localStorage.setItem('bigData', 'very_large_data');

Confusing lifetimes

// ❌ Mistake — think sessionStorage is also forever
sessionStorage.setItem('important', 'data'); // Disappears!
 
// ✅ Correct — use localStorage for important things
localStorage.setItem('important', 'data');

Simple Rules

localStorage — for permanent settings 💾
sessionStorage — for temporary data 🕐
Cookies — for auth (small!) 🍪
IndexedDB — for large data volumes 🗄️
Cookies are small — don’t clutter requests ⚠️
Security — don’t store passwords in localStorage 🔐

Understanding different browser storage options helps choose the right tool for each task! 💪

Want more articles to prepare for interviews? Subscribe to EasyAdvice, bookmark the site and improve yourself every day 💪