Browser Storage Guide

Compares and implements browser storage APIs for different web application needs. Covers localStorage and sessionStorage for simple key-value data, IndexedDB for structured client-side databases, Cache API for offline resource caching, cookies for server-communicated state, and the Origin Private File System for high-performance file operations, with guidance on capacity limits, persistence, and security considerations.

Usage

Describe what data you need to store in the browser, how much data, how long it should persist, and whether the server needs access to it. Specify your framework (React, Vue, vanilla JS) and any offline requirements. The skill recommends the right storage API and provides complete implementation code with error handling.

Examples

• "Store user preferences (theme, language, sidebar state) that persist across browser sessions"
• "Cache API responses in IndexedDB for offline access with a 24-hour expiration policy"
• "Implement a shopping cart that survives page refreshes but clears when the browser tab closes"
• "Store large files (images, documents) client-side for an offline-first application using OPFS"

Guidelines

• Use localStorage for simple, small data (< 5MB) that persists until explicitly cleared
• Use sessionStorage for per-tab temporary data that should not persist across browser sessions
• Use IndexedDB for structured data, large datasets, or when you need indexes and range queries
• Use Cache API with service workers for caching HTTP responses and enabling offline resource access
• Use cookies only for data the server needs on every request (auth tokens, session IDs); use HttpOnly + Secure flags
• All storage APIs except cookies are origin-scoped and subject to storage quota (varies by browser)
• Handle storage quota errors gracefully: catch QuotaExceededError and implement cleanup or eviction strategies
• Never store sensitive data (passwords, PII, tokens) in localStorage — it is accessible to any script on the origin