Local Storage Snippets — Free HTML CSS JS Local Storage & IndexedDB Examples

Some state should survive a refresh without a backend: a chosen theme, a dismissed banner, a half-written draft, a list of recently viewed items. These snippets use localStorage, sessionStorage and IndexedDB to keep exactly that kind of state on the device, with no account and no network round trip.

They also handle the parts that bite in production — storage that throws in private mode, JSON that fails to parse after a schema change, and quota limits that arrive without warning.

Picking the right storage for the job

localStorage persists across tabs and restarts and is capped around 5MB of synchronous, string-only data — right for a theme flag, a dismissed-banner id, or a short recently-viewed list. sessionStorage holds the same shape of data but clears when the tab closes, which suits a multi-step form that should not survive an accidental close. IndexedDB is asynchronous, holds far more data, stores real objects and blobs without JSON stringifying them, and can be queried by index — the right choice once a draft, cache or dataset outgrows a simple key-value pair.

Guarding against the ways storage actually fails

A read or write can throw rather than quietly fail: Safari's private browsing mode throws on any localStorage write, a browser configured to block site data throws on access entirely, and a full quota throws on write specifically. Every snippet that touches storage wraps the call in try/catch and falls back to an in-memory default, so a strict privacy setting degrades the feature instead of crashing the page.

Schema drift and stale data

A value written by an older version of a page can fail to parse, or parse into a shape the current code no longer expects. These snippets version their stored payloads or defensively check the parsed shape before trusting it, rather than assuming JSON.parse always returns what was last written — the failure mode otherwise is a page that throws on load for any returning visitor with old data.

Reading before first paint

For anything visual — a theme, a layout preference — reading the stored value has to happen in a small inline script in the document head, before the stylesheet-dependent paint happens. Doing the same read inside a framework's mount effect happens after the first paint, which is exactly when a visible flash of the wrong state occurs.