localStorage / sessionStorage

// Save data.
localStorage.setItem("key", "value");

// Retrieve data.
var value = localStorage.getItem("key");

// Delete data.
localStorage.removeItem("key");

// Delete all data.
localStorage.clear();

sample_localStorage.js

// Pattern 1: Save, retrieve, and delete a string
localStorage.setItem("username", "Yagami Iori");
var name = localStorage.getItem("username");
console.log(name); // Outputs "Yagami Iori"

// Returns null for keys that do not exist.
var result = localStorage.getItem("address");
console.log(result); // Outputs "null"

// Delete a specific item.
localStorage.removeItem("username");

// Delete all data.
localStorage.clear();

sample_localStorage.js

// Pattern 2: Saving an object (JSON conversion required)
var user = { name: "Yagami Iori", org: "Yagami-ryu Old Fighting Style" };
localStorage.setItem("user", JSON.stringify(user)); // Convert the object to a JSON string before saving.

// When retrieving, parse the JSON string back into an object.
var savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // Outputs "Yagami Iori"
console.log(savedUser.org);  // Outputs "Yagami-ryu Old Fighting Style"

// Check the number of stored items.
console.log(localStorage.length); // Outputs "1"

sample_localStorage.html

<label>
	Theme:
	<select id="theme">
		<option value="light">Light</option>
		<option value="dark">Dark</option>
	</select>
</label>

sample_localStorage.js

// Pattern 3: Saving theme preferences (persists after the browser is closed)
var themeSelect = document.getElementById("theme");

// Restore the saved theme when the page loads.
var savedTheme = localStorage.getItem("theme");
if (savedTheme) {
	themeSelect.value = savedTheme;
	document.body.className = savedTheme;
}

// Save when the selection changes.
themeSelect.addEventListener("change", function() {
	localStorage.setItem("theme", themeSelect.value);
	document.body.className = themeSelect.value;
});

View sample page

localStorage and sessionStorage are Web Storage APIs that let you store key-value pairs in the browser. Unlike cookies, data is not automatically sent to the server, making them well-suited for client-side data management.

Only strings can be stored. To save objects or arrays, convert them to a string with JSON.stringify() before saving, and restore them with JSON.parse() when retrieving. Storage capacity varies by browser, but is typically around 5 MB.

localStorage is commonly used for saving theme preferences, temporarily persisting form input, and managing shopping carts — anywhere you want data to survive after the page is closed. sessionStorage, on the other hand, is a good fit for temporary data in multi-step forms and similar cases where you want the data cleared when the tab is closed.