100% Free Forever
AI-Powered Learning
Industry Expert Content
Certificates & Badges
Learn At Your Own Pace
Web

Local Storage

BeginnerConcept9.8K learners

Local Storage is a browser API that lets web applications store key-value string data on the user's device, persisting across page reloads and browser restarts until explicitly cleared.

Definition

Local Storage is a browser API that lets web applications store key-value string data on the user's device, persisting across page reloads and browser restarts until explicitly cleared.

Overview

Local Storage is part of the Web Storage API, accessed in JavaScript via window.localStorage, and offers a simple synchronous key-value interface (setItem, getItem, removeItem, clear) for storing string data scoped to a page's origin. Unlike a Cookie, data stored in local storage is never automatically sent to the server — it stays entirely on the client until JavaScript reads and uses it, and there is no built-in expiration; data persists indefinitely unless the app or user clears it. Each origin typically gets around 5-10MB of local storage, which is far more than the roughly 4KB available per cookie, making it well suited for caching non-sensitive UI state, feature flags, or small amounts of application data client-side. Because it's synchronous, heavy use can block the main thread, so for larger or more structured data — especially anything needing querying, transactions, or storage of complex objects — IndexedDB is the better-suited API. Local Storage should generally be avoided for storing sensitive data like authentication tokens, since anything accessible to page JavaScript is also accessible to any malicious script that manages to run on the page via an XSS vulnerability — cookies with the HttpOnly flag offer stronger protection for that use case. It's commonly used alongside client-side state libraries like Zustand or TanStack Query to persist state between sessions.

Key Concepts

  • Simple synchronous key-value API: setItem, getItem, removeItem, clear
  • Data persists across page reloads and browser restarts with no built-in expiration
  • Scoped per origin, not automatically sent with HTTP requests
  • Typical storage limit of around 5-10MB per origin
  • Stores only strings — objects must be serialized (e.g., with JSON.stringify)
  • Accessible to any JavaScript running on the page, including malicious scripts via XSS
  • Synchronous API can block the main thread for larger operations

Use Cases

Persisting UI preferences like theme, layout, or dismissed banners
Caching non-sensitive application state between sessions
Storing feature flags or A/B test assignments client-side
Persisting form drafts so users don't lose input on accidental navigation
Remembering onboarding or tutorial completion status
Client-side state libraries persisting state to survive page reloads

Frequently Asked Questions

From the Blog