Database & Storage
Choosing storage solutions for frontend applications: browser storage, databases, and file storage.
Quick Navigation: Browser Storage • Database • File Storage • Comparison
Browser Storage Options
LocalStorage
Simple key-value storage that persists across sessions.
Pros
- ✓ Simple API
- ✓ Persists indefinitely
- ✓ ~5MB storage
Cons
- ✗ Synchronous (blocks main thread)
- ✗ Strings only
- ✗ No expiration
🎯 Best For: User preferences, theme, small non-sensitive data
SessionStorage
Same as LocalStorage but clears when tab closes.
🎯 Best For: Temporary data, form draft, tab-specific state
IndexedDB
Low-level API for significant amounts of structured data.
Pros
- ✓ Large storage (50MB+)
- ✓ Async (doesn't block)
- ✓ Stores any data type
- ✓ Indexes for fast queries
Cons
- ✗ Complex API
- ✗ Need wrapper library (Dexie)
- ✗ User can clear it
🎯 Best For: Offline apps, large datasets, file caching
Cookies
Small data sent with every HTTP request.
Pros
- ✓ Auto-sent to server
- ✓ HttpOnly for security
- ✓ Built-in expiration
Cons
- ✗ 4KB limit
- ✗ Sent with every request (overhead)
- ✗ Complex privacy regulations
🎯 Best For: Authentication tokens, session IDs
Database Trade-offs
SQL (PostgreSQL, MySQL)
Pros
- ✓ ACID compliance
- ✓ Complex queries (JOINs)
- ✓ Strong consistency
- ✓ Mature ecosystem
Cons
- ✗ Schema rigidity
- ✗ Harder to scale horizontally
- ✗ Migrations needed
NoSQL (MongoDB, DynamoDB)
Pros
- ✓ Flexible schema
- ✓ Horizontal scaling
- ✓ Fast for specific queries
Cons
- ✗ Eventual consistency (usually)
- ✗ Limited querying
- ✗ Data duplication
Serverless (Supabase, PlanetScale, Neon)
Pros
- ✓ No infrastructure management
- ✓ Auto-scaling
- ✓ Pay per use
- ✓ Great DX
Cons
- ✗ Cold starts
- ✗ Vendor lock-in
- ✗ Can get expensive at scale
File Storage
Object Storage (S3, R2, GCS)
Store files as objects with metadata.
Pros: Scalable, cheap, CDN integration
Cons: Not a filesystem, eventual consistency
Managed (Uploadthing, Cloudinary)
Abstraction over object storage with transformations.
Pros: Easy uploads, image transforms, signed URLs
Cons: Additional cost, less control
Edge Storage (Vercel Blob, Cloudflare R2)
Storage at the edge for low latency.
Pros: Low latency, integrated with edge functions
Cons: Limited features, vendor-specific
Comparison Table
| Storage | Capacity | Persistence | Use Case |
|---|---|---|---|
| LocalStorage | ~5MB | Permanent | Preferences |
| SessionStorage | ~5MB | Tab session | Form drafts |
| IndexedDB | 50MB+ | Permanent | Offline data |
| Cookies | ~4KB | Configurable | Auth tokens |
| PostgreSQL | Unlimited | Server | App data |
| S3/R2 | Unlimited | Server | Files, media |
Best Practices
- 1.Never store sensitive data in LocalStorage (use HttpOnly cookies).
- 2.Use IndexedDB with Dexie for complex offline data needs.
- 3.Prefer SQL for relational data and complex queries.
- 4.Upload files directly to object storage (presigned URLs).
- 5.Consider serverless databases for small-medium projects.