Use localStorage to keep small pieces of web-page state—such as a dismissed notice or a saved preference—across reloads and browser restarts. Use sessionStorage for data that should last only for the current tab’s page session, and use IndexedDB when you need a larger, structured, or performance-sensitive store. Web Storage is simple, but its values are strings, its calls are synchronous, and browser policies can limit whether data is available or retained.
Choose the right browser storage
The right choice depends on how long data should last, how it is organized, and how much work the page must do to read or write it. Web Storage provides simple string key/value storage; IndexedDB is a better fit for larger or more structured datasets.
| Mechanism | Lifetime | Data model | Execution model | Best fit |
|---|---|---|---|---|
localStorage |
Persists across browser sessions, subject to browser policy and storage eviction. MDN | String key/value pairs | Synchronous | Small preferences and state that should survive a restart |
sessionStorage |
Cleared when the page session ends; partitioned by tab. MDN | String key/value pairs | Synchronous | Temporary state for one tab’s session |
| IndexedDB | Client-side database storage; retention depends on browser storage policy | Structured database records | Asynchronous | Larger datasets, indexed data, or work where blocking the page is a concern. MDN |
Web Storage is part of the wider set of client-side storage technologies that also includes IndexedDB, cookies, and the Cache API. Pick based on what the page needs to store, rather than treating these mechanisms as interchangeable. MDN’s client-side storage guide explains the options.
Use localStorage with the method API
Call setItem() to save a value, getItem() to retrieve it, and removeItem() to delete a key. The key() and length members let you inspect stored keys and the number of entries. MDN advises using these methods rather than assigning properties such as localStorage.theme = "dark", because property names can conflict with the storage object’s own methods and properties. MDN Web Storage API
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
const themeKey = "exampleApp.theme";
function saveTheme(theme) {
try {
localStorage.setItem(themeKey, theme);
return true;
} catch (error) {
// Storage may be blocked or unavailable.
return false;
}
}
function loadTheme() {
try {
return localStorage.getItem(themeKey) ?? "system";
} catch (error) {
return "system";
}
}
function clearTheme() {
try {
localStorage.removeItem(themeKey);
} catch (error) {
// Continue without persisted state.
}
}Prefix keys with an application-specific name, as in exampleApp.theme, to reduce collisions with other keys your page may use. Handle unavailable storage with a sensible in-memory or default value; don’t make the page unusable if saving fails.
Store objects by serializing them
Web Storage stores strings, not JavaScript objects. Convert structured data to JSON before saving it, and parse it after reading. Since saved content may be missing or malformed, treat parsing as a fallible operation:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
const settingsKey = "exampleApp.settings";
function saveSettings(settings) {
try {
localStorage.setItem(settingsKey, JSON.stringify(settings));
return true;
} catch (error) {
return false;
}
}
function loadSettings() {
try {
const raw = localStorage.getItem(settingsKey);
if (raw === null) return null;
return JSON.parse(raw);
} catch (error) {
return null;
}
}In production code, distinguish a missing value from invalid JSON if the application needs to report or repair corrupted state. Keep only the small client-side state that the page needs; use a database-oriented API when records grow, need indexing, or must be processed without synchronous work on the main thread.
Understand origin and page-session boundaries
Storage belongs to a web origin, not just a brand name or domain. An origin includes the protocol, host, and port, so http://example.com and https://example.com have separate localStorage areas. A page running on a different port is also a different origin. MDN’s localStorage reference
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Rank #3
sessionStorage is additionally partitioned by tab and is cleared when that page session ends. Use it when a value should not carry into a later session; use localStorage when state should remain available after a browser restart, provided browser policy permits it. MDN’s sessionStorage reference
Do not rely on opening an HTML file directly with a file: URL when persistence matters. MDN documents file:-URL behavior as undefined and notes that it can vary between browsers. Serve the page from a web origin and test it under the intended HTTP or HTTPS address. MDN
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Account for synchronous work and larger datasets
Web Storage methods run synchronously, so reading or writing storage occupies the calling thread. That simplicity is useful for a few small values, but frequent operations or larger payloads can interfere with page responsiveness. IndexedDB uses asynchronous database operations and is better suited to larger datasets, indexed records, and client-side application data that would make Web Storage a poor fit. MDN’s client-side storage guide
Why saved data may be unavailable or disappear
Persistence is not an unconditional guarantee. Browser privacy settings, private browsing behavior, policy restrictions, quota limits, and storage eviction can prevent writes or remove stored data. Build the page so it can recover when a value is missing, and avoid treating browser storage as the only copy of data a user cannot afford to lose.
The Storage API exposes estimates and persistence-related controls for a site’s storage. It is available only in secure contexts in browsers that enforce that requirement. MDN records the Storage API’s baseline availability as December 2021; that availability does not override a user’s browser policy or guarantee permanent retention. MDN Storage API
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Implementation checklist
- Choose
localStorageif state should survive browser restarts, orsessionStorageif it should last only for the current tab’s page session. - Use
setItem(),getItem(), andremoveItem(), with keys namespaced to your application. - Serialize objects explicitly with
JSON.stringify()and parse them defensively withJSON.parse(). - Provide defaults or another fallback for missing values, malformed data, and blocked storage.
- Move larger, indexed, or performance-sensitive data to IndexedDB.
- Test on the intended HTTP or HTTPS origin, not just from a local file, and account for private browsing, policy restrictions, quota, and eviction.
MDN lists the Web Storage API baseline availability as July 2015 and the Storage API baseline availability as December 2021. These dates describe documented browser-platform availability, not a promise that storage is enabled in every user’s browsing context. Web Storage API · Storage API
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
