Web Storage

Master localStorage, sessionStorage, and IndexedDB to build fast, offline-friendly applications with persistent client-side data.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

🎯 What You'll Learn

💡 Running Code Locally: While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience:

• Download Node.js to run JavaScript on your computer
• Use your browser ' s Developer Console (Press F12) to test code snippets
• Create a .html file with <script> tags and open it in your browser

Understanding the Storage Landscape

JavaScript provides three powerful storage mechanisms, each designed for different needs:

localStorage

• • Persists forever
• • Shared across tabs
• • ~5-10 MB limit
• • Synchronous

sessionStorage

• • Deleted when tab closes
• • Isolated per tab

IndexedDB

• • Stores objects & blobs
• • Hundreds of MB+
• • Asynchronous

localStorage: Long-Term Persistent Storage

localStorage keeps data forever (or until the user clears it manually). It's ideal for preferences, themes, cached data, and recently viewed items.

Common Mistakes to Avoid

sessionStorage: Tab-Specific, Temporary Storage

sessionStorage is deleted when the tab closes. It's perfect for multi-step forms, temporary shopping cart state, and tab-isolated workflows.

localStorage vs sessionStorage

Feature

localStorage

sessionStorage

Persistence

Until cleared

Until tab closes

Scope

Shared across tabs

Per-tab isolation

Use case

Preferences & saved state

In-progress workflows

Building a Storage Service Layer

Production apps don't store values directly into localStorage. They create a Storage Service Layer that centralizes logic, handles parsing errors, and adds features like namespacing.

TTL-Based Storage (Time-To-Live)

For caching API responses, you want data to expire automatically. This pattern prevents stale data while improving performance.

IndexedDB: The Browser's Real Database

IndexedDB is the production-grade solution for storing large datasets and offline application data. It supports images, audio files, documents, and complex object structures.

Opening a Database

CRUD Operations

Storing Files and Blobs

IndexedDB can store images, audio, PDFs, and binary data — essential for PWAs and offline apps.

Checking Storage Availability

Important: Safari Private Mode often breaks IndexedDB entirely. Always build with fallbacks!

Cross-Tab Communication

localStorage can act as a lightweight messaging system between tabs. Changes trigger events in other tabs automatically.

Offline-First Architecture

This is the architecture behind modern productivity apps like Notion, Slack, and Linear. Save locally first, sync when online.

Hybrid Storage Architecture

Professional apps combine all three storage types based on data characteristics:

Performance Best Practices

Safe JSON Parsing

Always wrap JSON.parse in try-catch to prevent app crashes from corrupted data.

Common Mistakes Developers Make

❌ Security Mistakes

• • Storing passwords in localStorage
• • Storing JWT tokens (XSS can steal them)
• • Storing PII or banking data

❌ Performance Mistakes

• • Storing huge arrays in localStorage
• • Writing on every keystroke
• • Loading large storage synchronously

❌ Logic Mistakes

• • Forgetting to JSON.stringify objects
• • Assuming storage always exists
• • Not handling quota errors

✔ Best Practices

• • Use storage service layers
• • Check storage availability first
• • Use IndexedDB for large data

Practice Exercises

• A theme switcher using localStorage
• A multi-step checkout using sessionStorage
• A fully offline notes app using IndexedDB
• A custom wrapper library that unifies all three storage types
• A cache system that stores API responses with TTL
• An IndexedDB migration (version 1 → 2 → 3)
• A "Recently Viewed Items" tracker
• Cross-tab real-time sync for a shopping cart

What You Learned

• ✔ localStorage for persistent settings
• ✔ sessionStorage for tab-specific state
• ✔ IndexedDB for large datasets
• ✔ Building storage service layers
• ✔ TTL-based caching patterns
• ✔ Cross-tab communication
• ✔ Offline-first sync architecture
• ✔ Hybrid storage design
• ✔ Storing files and blobs
• ✔ Safe JSON parsing

🎉 Lesson Complete!

You now understand how to store data client-side using localStorage, sessionStorage, and IndexedDB. Next up: Building Custom APIs.

Practice quiz

Continue this course

• Previous: Advanced Fetch Patterns
• Next: Building Custom APIs