Platform under construction

Browser APIs & BOM

Advanced

localStorage & sessionStorage

localStorage and sessionStorage store small string values in the browser.

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
localStorage.removeItem("theme");

Browser APIs & BOM

Web storage is simple, synchronous and string-only.

localStorage persists across browser sessions. sessionStorage lasts for the current tab session.

Both APIs store strings. Objects need JSON.stringify before storage and JSON.parse after reading.

Storage is synchronous and limited. Do not use it for large data, secrets or high-frequency writes.

localStorage

Persists until cleared.

sessionStorage

Persists for the tab session.

String values

Everything is stored as text.

Synchronous API

Reads and writes can block briefly.

Examples

Browser APIs should be used with capability checks, permissions and fallbacks.

Store small preferences only

const settings = { theme: "dark" };
localStorage.setItem("settings", JSON.stringify(settings));

Storing secrets in localStorage

localStorage.setItem("apiToken", token);

// Browser storage is readable by JavaScript on the page.

Code patterns

Reusable examples for quick reference.

These examples focus on practical browser APIs: URL state, storage, cookies, clipboard, permissions, observers and offline-capable platform tools.

Store string

Simple key/value storage.

localStorage.setItem("theme", "dark");

Read with fallback

Missing keys return null.

const theme = localStorage.getItem("theme") ?? "system";

Store object

Serialize structured data.

localStorage.setItem("settings", JSON.stringify(settings));

Remove key

Clear one value.

localStorage.removeItem("settings");

Rules that matter

Treat the browser as a platform.

Browser APIs are powerful because they touch privacy, navigation, storage, permissions and performance. Use them deliberately.

Store small values

Preferences and draft UI state are good fits.

Serialize objects

Use JSON for structured data.

Handle parse errors

Stored data can be missing or corrupted.

Do not store secrets

JavaScript-accessible storage is not a vault.

Avoid heavy writes

Storage is synchronous.

Know persistence differences

localStorage and sessionStorage have different lifetimes.

Production thinking

A strong browser API layer makes features feel integrated with the platform instead of bolted onto the page.

Why does this matter?

Browser storage makes lightweight personalization possible without a server round trip.

Accessibility

Stored preferences can remember accessible choices such as reduced motion or theme.

Production note

Production storage code should version data, handle corruption and avoid sensitive values.

SEO note

Stored UI preferences should not hide or remove important content by default.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Store an object with JSON.stringify.
Add a remove button.
Switch the example to sessionStorage.

Practice assignment

Do this before moving to the next topic.

Store one string value.
Read it with a fallback.
Remove it again.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand localStorage & sessionStorage.