Local Storage is the browser’s localStorage object from the Web Storage API. From a <script> in your HTML page you save string key-value pairs for the document’s origin. Data is saved across browser sessions—it remains after you close the tab or browser until you remove it or the user clears site data.
Both use the same Storage methods. localStorage has no expiration and is shared by every tab of that origin. sessionStorage lasts only for one tab’s page session and clears when that tab closes.
Remember a dark/light theme, remember last visited section, keep a simple shopping cart on the client, or restore form defaults on return visits—without sending that data to the server on every request (unlike cookies).
Use it for small, non-sensitive preferences that should survive reloads and new visits. For large or structured offline data, use IndexedDB. For tab-only drafts, use sessionStorage.
Keys and values are strings. Integer keys are coerced to strings. Store objects with JSON.stringify / JSON.parse.
Same-origin scripts (including XSS) can read localStorage. Never store passwords, tokens, or payment data there.
http://example.com and https://example.com have separate localStorage areas. Private browsing data is cleared when the last private tab closes.
Call methods on localStorage from a script in your HTML document:
localStorage.setItem("key", "value");
var data = localStorage.getItem("key"); // string or null
localStorage.removeItem("key");
localStorage.clear(); // remove all keys for this origin
localStorage.key(0); // name of key at index
localStorage.length; // number of keys<button type="button" id="themeBtn">Toggle theme</button>
<script>
var saved = localStorage.getItem("theme");
if (saved) document.body.setAttribute("data-theme", saved);
document.getElementById("themeBtn").onclick = function () {
var next = document.body.getAttribute("data-theme") === "dark" ? "light" : "dark";
document.body.setAttribute("data-theme", next);
localStorage.setItem("theme", next);
};
</script>How local storage fits into HTML pages and the browser:
| Concept | Meaning |
|---|---|
localStorage | Per-origin Storage object that persists across sessions |
| Origin | Scheme + host + port; storage is separate per origin |
setItem / getItem | Write and read string values |
removeItem / clear | Delete one key or all keys for this origin |
key / length | Inspect stored keys for debugging |
| Shared tabs | All tabs of the origin see the same localStorage |
| Not in HTTP | Unlike cookies, values are not sent with page requests |
sessionStorage | Tab-scoped storage that clears when the tab closes |
storage event | Other tabs can react when localStorage changes (see onstorage) |
localStorage | sessionStorage | |
|---|---|---|
| Scope | All tabs of the origin | One tab (top-level browsing context) |
| Lifetime | Until cleared by script or user | Until tab/window closes |
| Survives browser restart? | Yes | No |
| Best for | Theme, prefs, lasting client data | Drafts, wizards, one-visit state |
Wire persistent storage to page load and user actions.
localStorage.setItem(key, value).getItem and apply the value to the HTML (classes, attributes, form fields).removeItem for one preference, or clear to wipe the origin’s store.| Goal | Pattern |
|---|---|
| Save a string | localStorage.setItem("greeting", "Hello") |
| Restore on load | var v = localStorage.getItem("greeting") |
| Store an object | setItem("cart", JSON.stringify(obj)) |
| Forget one key | localStorage.removeItem("greeting") |
| Reset all keys | localStorage.clear() |
Save a value into this origin’s localStorage. Close the tab and return—it should still be there until you clear it.
Five patterns: save/read strings, JSON objects, remove keys, list keys, and a full HTML page demo.
localStorage.setItem("myCat", "Tom");
var cat = localStorage.getItem("myCat");
console.log(cat); // Tomnull if missing.var cart = { items: 2, total: 19.99 };
localStorage.setItem("cart", JSON.stringify(cart));
var loaded = JSON.parse(localStorage.getItem("cart"));
console.log(loaded.total); // 19.99getItem.QuotaExceededError.localStorage.setItem("temp", "draft");
localStorage.removeItem("temp");
console.log(localStorage.getItem("temp")); // nullstorage event when you remove a key.for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
console.log(key, localStorage.getItem(key));
}Connect localStorage to HTML buttons so data survives browser restarts:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Local Storage Example</title>
</head>
<body>
<h1>HTML Local Storage Example</h1>
<button type="button" id="save">Save to Local Storage</button>
<button type="button" id="retrieve">Retrieve from Local Storage</button>
<button type="button" id="remove">Remove from Local Storage</button>
<button type="button" id="clear">Clear All Local Storage</button>
<p id="output"></p>
<script>
document.getElementById("save").onclick = function () {
localStorage.setItem("greeting", "Hello, World!");
document.getElementById("output").textContent = "Data saved!";
};
document.getElementById("retrieve").onclick = function () {
var greeting = localStorage.getItem("greeting");
document.getElementById("output").textContent =
greeting ? greeting : "No data found";
};
document.getElementById("remove").onclick = function () {
localStorage.removeItem("greeting");
document.getElementById("output").textContent = "Data removed!";
};
document.getElementById("clear").onclick = function () {
localStorage.clear();
document.getElementById("output").textContent = "All data cleared!";
};
</script>
</body>
</html>localStorage.greeting for the whole origin.Most surprises come from origin rules, string-only values, or blocked storage.
They are different origins for storage. Data saved on http will not appear on https for the same host.
Non-strings are coerced. Prefer JSON so you do not get "[object Object]".
null checksgetItem returns null when missing. Guard before writing into HTML inputs or classes.
file: URLsBehavior is undefined across browsers. Do not rely on localStorage when opening HTML files from disk—use a local server.
Large strings can throw. Catch errors around setItem for big payloads.
Data is typically cleared when the last private tab closes. Do not assume permanent storage in private mode.
localStorage is part of the Web Storage API and is supported in all modern browsers.
Persistent Web Storage works across current browsers for same-origin HTML documents.
Bottom line: Use localStorage for lasting client preferences—support is widespread; watch privacy settings and file: origins.
setItem, getItem, removeItem, clear.One line: From your HTML page’s script, use localStorage for lasting, origin-scoped key-value data that outlives the browser session.
Open the full save/retrieve HTML demo and confirm data survives a browser restart.
8 people found this page helpful