JavaScript Storage & BOM
localStoragesaves data in the browser that survives closing the page.
It belongs to one website, so one site cannot read another's data.
There is no expiry; it stays until removed.
Example
javascript
localStorage.setItem("name", "Ada");
console.log(localStorage.getItem("name"));The output is Ada.
setItem(key, value) saves a value.
getItem(key) reads it back, or null if missing.
removeItem(key) and clear() delete it.
Syntax
javascript
localStorage.setItem("key", "value");
localStorage.getItem("key");Every value is stored as a string.
A number is converted to a string automatically when saved.
Reading it back gives text, not the original type.
Example
javascript
localStorage.setItem("count", 42);
const value = localStorage.getItem("count");
console.log(typeof value);
console.log(value === "42");Convert with Number if you need the value back as a number.
Reading a key that was never set gives null, not an error.
Example
javascript
localStorage.clear();
console.log(localStorage.getItem("missing"));Always check for null before using the result.
removeItem deletes one key without touching the rest.
Example
javascript
localStorage.setItem("a", "1");
localStorage.setItem("b", "2");
localStorage.removeItem("a");
console.log(localStorage.getItem("a"));
console.log(localStorage.getItem("b"));Only the named key was removed.
clear() removes every key the site has saved.
Example
javascript
localStorage.setItem("a", "1");
localStorage.setItem("b", "2");
localStorage.clear();
console.log(localStorage.length);The output is 0.
Every call blocks until it finishes, unlike most modern browser storage.
For small amounts of data this is not a problem.
Example
javascript
localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
console.log(theme);No await is needed.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript localStorage</title>
</head>
<body>
<h1>localStorage</h1>
<input id="name" placeholder="Your name">
<button id="save">Save</button>
<p id="out"></p>
<script>
const out = document.getElementById("out");
const saved = localStorage.getItem("visitorName");
out.textContent = saved ? "Welcome back, " + saved : "No name saved yet";
document.getElementById("save").addEventListener("click", function () {
const value = document.getElementById("name").value;
localStorage.setItem("visitorName", value);
out.textContent = "Saved: " + value;
});
</script>
</body>
</html>Run the above example in the Try It Editor.
Try reloading:
Save a name, reload the page, and see it remembered.
localStorage persists until explicitly removed.null.localStorage is the simplest way to remember something between visits.
Remembering that values are always strings avoids a common bug.
For anything larger or more structured, other storage options exist.