Clean • Professional
When you build modern web applications, you often need to store data in the browser so users don’t lose their settings, preferences, or progress.
That’s where the HTML Web Storage API comes in.
It provides two powerful options: localStorage and sessionStorage. Both let you save key/value pairs directly in the browser without relying on cookies.
In this guide, we’ll explain everything about Web Storage, differences between localStorage & sessionStorage, and show you practical examples.
The Web Storage API is an HTML5 feature that allows websites to store data in the user’s browser.
Before Web Storage, developers used cookies, which had several issues:
👉 Web Storage solves these problems by offering more space, better speed, and simple methods.
There are two main types of storage in HTML5:
| Feature | localStorage | sessionStorage |
|---|---|---|
| Lifetime | Permanent (until cleared) | Only for the session (tab/window) |
| Storage Limit | ~5–10 MB | ~5–10 MB |
| Shared Across Tabs | Yes (same domain) | No (unique per tab) |
| Use Cases | Preferences, themes, cart | Temporary login session, forms |
Both localStorage and sessionStorage use the same methods:
// Save data
localStorage.setItem("username", "John");
// Get data
let user = localStorage.getItem("username");
// Remove specific item
localStorage.removeItem("username");
// Clear all storage
localStorage.clear();
// Get key by index
let keyName = localStorage.key(0);👉 Same syntax works with sessionStorage. Just replace localStorage with sessionStorage.
Example: Saving and Retrieving Data
<button onclick="saveData()">Save Data</button>
<button onclick="getData()">Get Data</button>
<p id="output"></p>
<script>
function saveData() {
localStorage.setItem("theme", "dark");
alert("Theme saved!");
}
function getData() {
let theme = localStorage.getItem("theme");
document.getElementById("output").innerText = "Theme: " + theme;
}
</script>Web Storage only stores strings. If you want to save objects or arrays, use JSON.stringify() and JSON.parse().
// Save object
let user = { name: "Alice", age: 25 };
localStorage.setItem("user", JSON.stringify(user));
// Get object
let data = JSON.parse(localStorage.getItem("user"));
console.log(data.name); // AliceSupported by all modern browsers (Chrome, Firefox, Safari, Edge, Opera).
Not available in very old browsers (IE < 8).
localStorage & sessionStorage in Action: Complete Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Storage Demo</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
button { margin: 5px; padding: 8px 12px; cursor: pointer; }
#output { margin-top: 15px; padding: 10px; background: #f3f3f3; }
</style>
</head>
<body>
<h2>Web Storage (localStorage & sessionStorage)</h2>
<!-- Local Storage -->
<h3>localStorage Example</h3>
<button onclick="saveLocal()">Save Local Data</button>
<button onclick="getLocal()">Get Local Data</button>
<button onclick="removeLocal()">Remove Local Data</button>
<button onclick="clearLocal()">Clear All Local</button>
<!-- Session Storage -->
<h3>sessionStorage Example</h3>
<button onclick="saveSession()">Save Session Data</button>
<button onclick="getSession()">Get Session Data</button>
<button onclick="removeSession()">Remove Session Data</button>
<button onclick="clearSession()">Clear All Session</button>
<!-- Objects / Arrays -->
<h3>Storing Objects in localStorage</h3>
<button onclick="saveObject()">Save Object</button>
<button onclick="getObject()">Get Object</button>
<p id="output">Output will appear here...</p>
<script>
const output = document.getElementById("output");
// --- localStorage ---
function saveLocal() {
localStorage.setItem("theme", "dark");
alert("Saved: theme=dark (localStorage)");
}
function getLocal() {
let theme = localStorage.getItem("theme");
output.innerText = "localStorage theme: " + theme;
}
function removeLocal() {
localStorage.removeItem("theme");
alert("Removed theme from localStorage");
}
function clearLocal() {
localStorage.clear();
alert("Cleared all localStorage data");
}
// --- sessionStorage ---
function saveSession() {
sessionStorage.setItem("sessionUser", "John");
alert("Saved: sessionUser=John (sessionStorage)");
}
function getSession() {
let user = sessionStorage.getItem("sessionUser");
output.innerText = "sessionStorage user: " + user;
}
function removeSession() {
sessionStorage.removeItem("sessionUser");
alert("Removed sessionUser from sessionStorage");
}
function clearSession() {
sessionStorage.clear();
alert("Cleared all sessionStorage data");
}
// --- Objects & Arrays ---
function saveObject() {
let user = { name: "Alice", age: 25, skills: ["JS", "HTML", "CSS"] };
localStorage.setItem("user", JSON.stringify(user));
alert("Saved object to localStorage");
}
function getObject() {
let data = JSON.parse(localStorage.getItem("user"));
if (data) {
output.innerText = `Name: ${data.name}, Age: ${data.age}, Skills: ${data.skills.join(", ")}`;
} else {
output.innerText = "No object found in localStorage!";
}
}
</script>
</body>
</html>
Output :
