localStorage API

The `localStorage` API provides synchronous key-value storage for strings that persists across browser sessions for a given origin. It is useful for small client-side data such as preferences, but it is not appropriate for secrets or large structured datasets.

`localStorage` is part of the Web Storage API and stores data as string key-value pairs. A page accesses it through `window.localStorage`, and each origin has its own storage area.

Common operations include `setItem(key, value)`, `getItem(key)`, `removeItem(key)`, and `clear()`. `getItem()` returns the stored string or `null` when the key does not exist.

Because values are strings, objects and arrays normally need serialization with `JSON.stringify()` and deserialization with `JSON.parse()`. This adds an important boundary: the stored representation is text, not the original JavaScript object.

Storage is synchronous, so reads and writes happen on the main thread. It should therefore be used for relatively small amounts of data rather than large or frequently changing datasets.

`localStorage` is scoped by origin and normally remains available after the browser is closed and reopened. Browser privacy settings, storage limits, disabled storage, and other browser policies can affect whether storage is available or writable.

Key points

• Stores string key-value pairs through the Web Storage API.
• Data is scoped to an origin and normally persists across browser sessions.
• Use `JSON.stringify()` and `JSON.parse()` for structured JavaScript data.
• Operations are synchronous and can block the main thread.
• Do not use `localStorage` as a secure place for sensitive credentials or secrets.

Interview questions

What is `localStorage` and when would you use it?

`localStorage` is a browser API for storing string key-value pairs associated with an origin. Data normally survives page reloads and browser restarts. I would use it for small client-side state such as UI preferences or non-sensitive cached information. I would avoid it for secrets or data that needs server-side security guarantees.

How would you store and retrieve an object with `localStorage`?

`localStorage` stores strings, so I would serialize an object with `JSON.stringify()` before saving it. When reading it, I would retrieve the string with `getItem()` and pass that string to `JSON.parse()`. I would also handle missing or malformed data when the application expects the storage entry to exist.

Is `localStorage` synchronous or asynchronous, and why does that matter?

The Web Storage API is synchronous, so operations such as `getItem()` and `setItem()` complete synchronously from JavaScript's perspective. That simplicity can be useful, but expensive storage work can block the main thread. For larger datasets or workloads where asynchronous access is preferable, IndexedDB is a more suitable browser storage mechanism.

What security concerns should you consider before putting data in `localStorage`?

`localStorage` should not be treated as a secure secret store because JavaScript running in the page can access its contents. If an attacker can execute malicious JavaScript in the application's origin, stored secrets may be exposed. Sensitive authentication designs therefore commonly avoid placing long-lived credentials in `localStorage` and instead use mechanisms with appropriate server and browser security controls.