Let’s begin with Lecture 37 of the HTML5 & CSS3 series. Storing Data with localStorage and sessionStorage – Save Info Between Sessions. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Understand what localStorage and sessionStorage are
- Know how to save , retrieve , and remove data in the browser
- Be able to store user preferences like dark mode, username, or scores
- Make your website remember user choices even after it’s closed
- Build a form that saves input so users don’t lose progress!
💾 What Is localStorage?
localStorage is like a notebook inside the browser — it lets you save data even when the page is refreshed or closed.
Think of it like this:
If JavaScript variables are sticky notes (lost when you close the window), then localStorage is a notebook — it remembers things for next time!
Key Features:
- Data stays forever (until cleared)
- Can store strings, numbers, arrays, and objects (as JSON)
- Specific to each website (cannot be accessed by other sites)
📝 What Is sessionStorage?
sessionStorage is like a whiteboard — it remembers data only during the current session.
Think of it like this:
If
localStorageis a notebook, then sessionStorage is a whiteboard — it gets erased when you close the tab or browser.
Key Features:
- Data disappears when tab/browser is closed
- Same syntax as
localStorage - Great for temporary data like shopping cart items or login tokens
🔒 How to Use localStorage & sessionStorage
They both use the same methods:
| METHOD | DESCRIPTION |
|---|---|
setItem("key", "value") | Save data |
getItem("key") | Get saved data |
removeItem("key") | Remove specific item |
clear() | Remove all saved data |
Example:
// Save data
localStorage.setItem("username", "naji");
// Retrieve data
let name = localStorage.getItem("username");
// Remove data
localStorage.removeItem("username");
// Clear everything
localStorage.clear();To store objects or arrays, convert them to JSON:
let user = { name: "naji", age: 12 };
localStorage.setItem("user", JSON.stringify(user));
let storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // naji💻 Try This: Remember Username After Page Refresh
Let’s build a simple app that remembers a user’s name using localStorage.
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite), create a new file named:
remember-user.htmlStep 2: Add This Code
<!DOCTYPE html>
<html>
<head>
<title>Remember Me</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 40px;
}
.btn {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
#message {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Enter Your Name</h2>
<input type="text" id="userName">
<button class="btn" onclick="saveName()">Save</button>
<p id="message"></p>
<script>
// Load saved name on page load
window.onload = function() {
let savedName = localStorage.getItem("savedUserName");
if (savedName) {
document.getElementById("message").textContent = "Welcome back, " + savedName + "!";
} else {
document.getElementById("message").textContent = "You're new here. Please enter your name.";
}
}
function saveName() {
let name = document.getElementById("userName").value;
if (name.trim() !== "") {
// Save name in localStorage
localStorage.setItem("savedUserName", name);
// Show message
document.getElementById("message").textContent = "Hello, " + name + "! I'll remember you next time 😊";
} else {
alert("Please enter your name!");
}
}
</script>
</body>
</html>Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve built a page that remembers your name even after refreshing or reopening the page!
💡 Bonus: Store Form Input Temporarily with sessionStorage
Let’s make a form that remembers what the user typed — even if they accidentally refresh.
Add HTML:
<h2>Type Something (Try Refreshing!)</h2>
<textarea id="userInput" rows="4" cols="50"></textarea>
<button class="btn" onclick="saveTemp()">Save Temporarily</button>
<p id="tempMessage"></p>Add JavaScript:
// Load saved temp data
window.onload = function() {
let savedText = sessionStorage.getItem("tempInput");
if (savedText) {
document.getElementById("userInput").value = savedText;
document.getElementById("tempMessage").textContent = "Your last input was restored!";
}
}
function saveTemp() {
let text = document.getElementById("userInput").value;
sessionStorage.setItem("tempInput", text);
document.getElementById("tempMessage").textContent = "Input saved temporarily!";
}Now your form remembers what the user typed — but only for this session!
💡 Bonus: Dark Mode That Remembers User Preference
Update your dark mode toggle from earlier to remember the theme.
Add Button:
<button class="btn" onclick="toggleDarkMode()">Toggle Dark Mode</button>Update CSS:
.dark-mode {
background-color: #1e1e1e;
color: white;
}Add JavaScript:
// Check saved theme on load
window.onload = function() {
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark-mode");
}
}
function toggleDarkMode() {
document.body.classList.toggle("dark-mode");
if (document.body.classList.contains("dark-mode")) {
localStorage.setItem("theme", "dark");
} else {
localStorage.removeItem("theme");
}
}Now your site remembers the user’s theme choice even after refresh! 🌙
🧪 Try It Yourself!
- Build a note-taking app that saves notes in
localStorage. - Add a “Clear Notes” button that removes all saved notes.
- Store an array of favorite colors and display them dynamically.
- Use
sessionStorageto track how many times the user visited the page during this session.
✅ Summary of What You Learned Today
| CONCEPT | CODE EXAMPLE |
|---|---|
| Save Data | localStorage.setItem("key", "value"); |
| Get Data | localStorage.getItem("key"); |
| Remove Data | localStorage.removeItem("key"); |
| Clear All | localStorage.clear(); |
| Store Object | localStorage.setItem("user", JSON.stringify(user)); |
| Retrieve Object | let user = JSON.parse(localStorage.getItem("user")); |
| Session Storage | Same syntax, but uses sessionStorage instead |
🚀 Next Lecture Preview:
In Lecture 38 , we’ll explore JavaScript events and event bubbling — so you can understand how events work behind the scenes and build more complex interactive apps with buttons, forms, and dynamic elements that respond perfectly to user actions!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share.
HTML5 and CSS3 Compleate Series
