Cookies

What: Small text files sent by websites and stored on your computer. Cookies are mainly used for authentication, tracking, and remembering user preferences.

When to use: Authentication sessions, user preferences, tracking user behavior, shopping cart contents (without login), personalization.

Size Limit: ~4KB per cookie
Persistence: Configurable (minutes to years)
Scope: Domain + path specific
Security: Sent with every HTTP request
Real Examples:
  • "Remember me" login functionality
  • E-commerce shopping cart without account
  • Website language preferences
  • Analytics and tracking (Google Analytics, etc.)
Best Practices:
  • Use secure cookies for sensitive data (HTTPS only)
  • Set appropriate expiration times
  • Consider privacy laws (GDPR, CCPA compliance)
  • Don't store sensitive data in cookies

Try It Out - Cookie Storage

Local Storage

What: Permanent key-value storage that persists even after the browser is closed. Data is stored as strings and is accessible to all pages from the same origin.

When to use: User preferences, cached application data, offline content, remembering user choices across sessions.

Size Limit: ~5-10MB per origin
Persistence: Until manually cleared
Scope: Origin (protocol, domain, port)
Security: Same-origin policy, not sent to server
Real Examples:
  • User theme preferences (dark/light mode)
  • Application settings and configuration
  • Cached API responses for offline use
  • Shopping cart contents (for registered users)
  • Form auto-save functionality
Best Practices:
  • Always use try/catch blocks (storage might be full)
  • Only store simple data types that serialize well
  • Consider privacy implications for user data
  • Use meaningful key names with prefixes
  • Clear sensitive data when appropriate

Try It Out - Local Storage

Session Storage

What: Temporary key-value storage that only lasts for the duration of the browser tab/window. When the tab is closed, the data disappears.

When to use: Temporary form data, navigation state, one-time use tokens, wizard steps, temporary user interface preferences.

Size Limit: ~5-10MB per origin
Persistence: Until tab/window closes
Scope: Origin + tab/window
Security: Same-origin policy, not sent to server
Real Examples:
  • Unsaved form data (multi-step forms)
  • Shopping cart for guest users
  • UI state (expanded panels, sort orders)
  • Temporary navigation history
  • One-time authentication tokens
Best Practices:
  • Use for truly temporary data only
  • Always use try/catch blocks
  • Consider users opening links in new tabs
  • Don't rely on sessionStorage for important data
  • Use descriptive key names

Try It Out - Session Storage

IndexedDB

What: A powerful client-side database that stores data as objects with support for indexes, transactions, and complex queries. It's asynchronous and can store any JavaScript data type.

When to use: Complex data structures, offline applications, large datasets, structured data that needs querying, file storage, transactional operations.

Size Limit: ~50MB+ (can request more)
Persistence: Permanent (until cleared)
Scope: Origin
Security: Same-origin policy, transactional
Real Examples:
  • Offline web applications (Google Docs offline)
  • Caching large datasets locally
  • E-commerce product catalogs
  • Gaming save data and statistics
  • Email clients storing message data
Best Practices:
  • Use transactions for data integrity
  • Version your database schema properly
  • Handle database opening errors gracefully
  • Use indexes for frequently queried fields
  • Consider performance for large datasets

Try It Out - IndexedDB

Cache (Service Worker)

What: Programmatic control over the browser's HTTP cache, primarily used with Service Workers to enable offline functionality and performance optimization through custom caching strategies.

When to use: Progressive Web Apps (PWAs), offline-first applications, performance optimization, custom caching strategies, intercepting network requests.

Size Limit: Browser-managed (varies significantly)
Persistence: Until cleared or evicted
Scope: Origin + Cache instance
Security: HTTPS required, Service Worker context
Real Examples:
  • PWA offline functionality (Twitter, Slack)
  • Stale-while-revalidate caching strategies
  • Preloading critical resources
  • Background sync for offline actions
  • Custom network request handling
Best Practices:
  • Requires HTTPS in production
  • Handle Service Worker updates carefully
  • Use appropriate cache naming/versioning
  • Implement proper cache invalidation strategies
  • Consider storage quota limits

Try It Out - Cache API