11001

Storage opportunities in frontend applications

Storage opportunities in frontend applications

indexedDB (NoSQL, key-pair), redux (old redux), context api, local/ session storage

localStorage

  • Persistent, synchronous, ~5-10MB limit

  • Use for: user preferences, theme settings, non-sensitive data

  • Survives browser restarts

  • Same-origin only

sessionStorage

  • Tab-scoped, cleared on tab close

  • Use for: temporary form data, wizard state, single-session data

  • Faster than localStorage for ephemeral needs

IndexedDB

  • Asynchronous, large capacity (~50MB+, quota-based)

  • Use for: offline-first apps, large datasets, structured data

  • Supports indexes, transactions, queries

  • Libraries: Dexie.js, localForage (simplifies API)

Cookies

  • Small (4KB), sent with HTTP requests

  • Use for: auth tokens (httpOnly), tracking

  • Avoid for app state (overhead)

State Management

React Built-in:

  • useState/useReducer - Component-level, simple cases

  • Context API - Cross-component sharing, avoid over-rendering with memoization

  • useRef - Non-reactive values, DOM references

Redux Toolkit

  • Industry standard, powerful DevTools

  • Time-travel debugging, middleware ecosystem

  • Best for: large apps, complex async logic