Skip to main content
Course/Module 11/Topic 1 of 4Advanced

Web Storage & Data APIs

Master browser storage APIs — localStorage, sessionStorage, IndexedDB, and the Cache API for offline-capable web applications.

55 minBy Priygop TeamLast updated: Feb 2026

Browser Storage Options

  • localStorage: Persistent key-value storage — survives browser close. 5-10MB limit. Synchronous API. Use for user preferences, theme settings, saved drafts
  • sessionStorage: Same API as localStorage but data cleared when tab closes — use for temporary form data, wizard step progress, one-session state
  • IndexedDB: Full client-side database — stores structured data, blobs, and files. Asynchronous API. No size limit practically. Use for offline apps, large datasets
  • Cache API: Part of Service Workers — cache HTTP responses (pages, images, API data). Enables offline-first Progressive Web Apps. Fine-grained cache control
  • Cookies: Small data sent with every HTTP request — 4KB limit. Use for authentication tokens, session IDs. HttpOnly flag prevents JavaScript access (security)
  • Storage Comparison: localStorage (5MB, persist, sync, simple), IndexedDB (unlimited, persist, async, complex), sessionStorage (5MB, session, sync, simple), Cache API (unlimited, persist, async, network)

Service Workers & PWA

  • Service Worker: JavaScript file that runs in the background — intercepts network requests, enables offline support, push notifications, background sync
  • Offline First: Cache critical assets during Service Worker install → serve from cache first, fetch from network in background → seamless offline experience
  • Web App Manifest: manifest.json defines app metadata — name, icons, theme color, display mode. Enables 'Add to Home Screen' prompt on mobile
  • Push Notifications: Service Worker receives push messages even when the browser is closed — re-engage users with timely, relevant notifications
  • Background Sync: Queue network requests when offline — Service Worker replays them when connection returns. Forms, messages, uploads work offline
  • PWA Benefits: Install without app store, auto-update, work offline, push notifications, access device hardware. Starbucks PWA: 2x daily active users, 99% size reduction vs native app
Chat on WhatsApp
Priygop - Leading Professional Development Platform | Expert Courses & Interview Prep