HTML Web Storage
Web Storage lets web pages save data directly in the user's browser. The data stays on the user's device — no server required. This is useful for remembering user preferences, saving form progress, keeping a shopping cart, or caching data for offline use. HTML5 provides two types: localStorage and sessionStorage.
Web Storage vs Cookies
Visual Diagram — Comparison
Cookies localStorage sessionStorage
-------------- --------------- --------------- ---------------
Data limit ~4 KB ~5–10 MB ~5–10 MB
Sent to server Yes (every req) No No
Expires Set by developer Never Tab closes
Access Server + browser Browser only Browser only
Use case Sessions, auth Long-term prefs Temp form data
Web storage stores much more data than cookies and keeps it on the client side only — the server never sees it unless you send it explicitly.
localStorage
Data saved in localStorage has no expiration. It stays in the browser indefinitely — even after the tab closes, the browser closes, or the computer restarts — until the user or the page deletes it.
Visual Diagram — localStorage Persistence
Day 1: User saves their name preference
localStorage.setItem("username", "Alice")
↓
Day 2: User opens the same website again
localStorage.getItem("username") → "Alice" ✓ still there
Day 30: User opens same website
localStorage.getItem("username") → "Alice" ✓ still there
Writing to localStorage
<script>
// Store a string
localStorage.setItem("username", "Alice");
// Store a number (gets converted to string automatically)
localStorage.setItem("score", 95);
// Store an object (must convert to JSON string first)
const settings = { theme: "dark", fontSize: 16 };
localStorage.setItem("settings", JSON.stringify(settings));
</script>
Reading from localStorage
<script>
// Read a string
const name = localStorage.getItem("username"); // "Alice"
// Read a number (comes back as string — parse it)
const score = parseInt(localStorage.getItem("score")); // 95
// Read an object (parse the JSON string back)
const raw = localStorage.getItem("settings");
const settings = JSON.parse(raw); // { theme: "dark", fontSize: 16 }
// If key does not exist, getItem returns null
const missing = localStorage.getItem("nonexistent"); // null
</script>
Deleting from localStorage
<script>
localStorage.removeItem("username"); // remove one item
localStorage.clear(); // remove ALL items
</script>
sessionStorage
Data saved in sessionStorage lasts only for the current browser session — one tab, from open to close. When the user closes the tab, all session data disappears.
Visual Diagram — sessionStorage Lifecycle
User opens tab → website saves:
sessionStorage.setItem("step", "2")
User navigates to another page in same tab:
sessionStorage.getItem("step") → "2" ✓ still there
User opens a NEW tab to the same site:
sessionStorage.getItem("step") → null ✗ different session
User closes the original tab:
All session data deleted automatically
Using sessionStorage
<script>
// Same API as localStorage
sessionStorage.setItem("currentStep", "3");
const step = sessionStorage.getItem("currentStep"); // "3"
sessionStorage.removeItem("currentStep");
sessionStorage.clear();
</script>
Web Storage API Summary
Method What It Does ---------------------------- ---------------------------------------- setItem(key, value) Saves a key-value pair getItem(key) Returns value for key (null if missing) removeItem(key) Deletes the key-value pair clear() Deletes all stored data length Number of stored items key(index) Returns the key name at a given index
Practical Example — Remembering a Theme Setting
<button onclick="setTheme('dark')">Dark Mode</button>
<button onclick="setTheme('light')">Light Mode</button>
<div id="page" style="padding:20px;">Page content here</div>
<script>
// Apply saved theme when page loads
const savedTheme = localStorage.getItem("theme") || "light";
applyTheme(savedTheme);
function setTheme(theme) {
localStorage.setItem("theme", theme);
applyTheme(theme);
}
function applyTheme(theme) {
const page = document.getElementById("page");
if (theme === "dark") {
page.style.backgroundColor = "#222";
page.style.color = "#fff";
} else {
page.style.backgroundColor = "#fff";
page.style.color = "#000";
}
}
</script>
Visual Diagram — Theme Persistence
First visit: default light theme
User clicks Dark Mode:
localStorage.setItem("theme", "dark")
page turns dark
User closes browser and returns next week:
localStorage.getItem("theme") → "dark"
page loads in dark mode automatically ✓
Practical Example — Multi-Step Form Progress
<!-- Step 1 -->
<input type="text" id="name" placeholder="Your name">
<button onclick="saveStep1()">Next</button>
<script>
// Restore any previously saved data
document.getElementById("name").value =
sessionStorage.getItem("formName") || "";
function saveStep1() {
const name = document.getElementById("name").value;
sessionStorage.setItem("formName", name);
// Go to step 2
window.location.href = "step2.html";
}
</script>
If the user accidentally navigates back, the field still shows their previously entered name.
Storing Complex Data with JSON
Web storage only saves strings. To store arrays and objects, convert them to JSON strings first.
<script>
// Saving a cart (array of objects)
const cart = [
{ id: 1, name: "Notebook", qty: 2 },
{ id: 2, name: "Pen Set", qty: 1 }
];
localStorage.setItem("cart", JSON.stringify(cart));
// Reading it back
const savedCart = JSON.parse(localStorage.getItem("cart"));
savedCart.forEach(function(item) {
console.log(item.name, "×", item.qty);
});
// Notebook × 2
// Pen Set × 1
</script>
Checking Available Storage
<script>
// Check how much localStorage is available (approximate)
let total = 0;
for (let key in localStorage) {
if (localStorage.hasOwnProperty(key)) {
total += localStorage.getItem(key).length + key.length;
}
}
console.log("Used storage (approx):", (total / 1024).toFixed(2), "KB");
</script>
Listening for Storage Changes
The storage event fires in other browser tabs when localStorage changes. This lets multiple tabs sync data without a server.
<script>
window.addEventListener("storage", function(event) {
console.log("Key changed:", event.key);
console.log("Old value:", event.oldValue);
console.log("New value:", event.newValue);
});
</script>
Security Considerations
Web storage is domain-specific — a website can only access data it saved. A script on example.com cannot read storage saved by other.com.
However, any JavaScript running on your page can read your localStorage. If your site has a cross-site scripting (XSS) vulnerability, an attacker's script can steal stored data. Never store passwords, payment details, or authentication tokens in Web Storage. Use secure, HTTP-only cookies for sensitive session data instead.
When to Use Each Storage Type
Use localStorage for: → User preferences (theme, language, font size) → Shopping cart items (persist between visits) → Application settings → Cached API responses for offline use Use sessionStorage for: → Multi-step form progress (current session only) → Temporary UI state (which tab is open) → Data for a single browsing session
Web storage is a simple, powerful tool for making web pages remember things. Start with localStorage.setItem() and localStorage.getItem() — those two methods cover most real-world use cases.