Guest Mode:
BCA Student Stories & UpdatesLive
You
Day 31Advanced JavaScript & Browser APIs2 Hours Practical
Push to GitHub to Complete
Web Storage Architecture: localStorage, sessionStorage & JSON Serialization
Web Storage APIs provide a modern, secure way to store key-value pairs directly inside the client browser with up to 5MB of storage without expiring on page reload. This lesson teaches you how to serialize complex JavaScript objects and persist user choices seamlessly.
Interactive Learning Roadmap
Day 31 Step-by-Step Practical Flow
🎯1. What You Will Learn Today
✔Understand client-side storage mechanisms and compare localStorage vs sessionStorage vs cookies.
✔Store and retrieve string primitives with localStorage.setItem() and localStorage.getItem().
✔Serialize JavaScript objects and arrays using JSON.stringify() and deserialize with JSON.parse().
✔Implement a dark/light theme switcher with persistent user preference that survives page reloads.
✔Handle storage quotas, clearing storage (removeItem/clear), and checking for null values safely.
Day 31 MasterclassAdvanced JavaScript & Browser APIs
Web Storage Architecture: localStorage, sessionStorage & JSON Serialization — Comprehensive Practical Guide
Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.
Real-World Purpose Aur Zaroorat
Web Storage APIs provide a modern, secure way to store key-value pairs directly inside the client browser with up to 5MB of storage without expiring on page reload. This lesson teaches you how to serialize complex JavaScript objects and persist user choices seamlessly.
Persistent vs Session: localStorage persists across browser restarts; sessionStorage clears when the tab/window closes.
Key-Value String Only: Web Storage ONLY stores strings. Storing an object directly results in "[object Object]".
JSON Serialization: Always use JSON.stringify(data) when saving and JSON.parse(stored) when retrieving objects or arrays.
Safe Hydration: Always check if the stored item is null before attempting to parse or use it.
Origin-Scoped Security: Web storage is isolated per protocol, domain, and port (Same-Origin Policy).
Dimaag Mein Bithane Ka Model
"Think of localStorage like your browser backpack: whenever you close the door (tab/browser) and come back tomorrow, everything you packed inside remains exactly where you left it."
💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.
👨🏫3. Teacher Demonstration Code
See how user theme choices and profile names are serialized to localStorage and re-applied immediately upon page mount.
Persistent Theme & User Profile State Enginehtml
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: 'Segoe UI', sans-serif; transition: background 0.3s, color 0.3s; padding: 24px; }
body.light { background: #f8fafc; color: #0f172a; }
body.dark { background: #060c18; color: #ffffff; }
.card { max-width: 420px; margin: auto; padding: 24px; border-radius: 14px; border: 1px solid #334155; }
button { padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; margin-top: 10px; }
.btn-toggle { background: #2563eb; color: #fff; }
input { width: 100%; padding: 10px; margin: 8px 0; border-radius: 6px; border: 1px solid #475569; box-sizing: border-box; }
</style>
</head>
<body class="dark">
<div class="card">
<h2>🌓 Theme & Storage Manager</h2>
<p id="welcomeText">Welcome, Guest!</p>
<input type="text" id="usernameInput" placeholder="Enter your name..." />
<button id="saveBtn" class="btn-toggle">Save Name to LocalStorage</button>
<button id="themeBtn" class="btn-toggle" style="background:#04aa6d;">Toggle Theme (☀️/🌙)</button>
<button id="clearBtn" style="background:#ef4444; color:#fff;">Clear Storage</button>
</div>
<script>
const themeBtn = document.getElementById("themeBtn");
const saveBtn = document.getElementById("saveBtn");
const clearBtn = document.getElementById("clearBtn");
const usernameInput = document.getElementById("usernameInput");
const welcomeText = document.getElementById("welcomeText");
// 1. Hydrate state on page load
const savedTheme = localStorage.getItem("bca_theme") || "dark";
document.body.className = savedTheme;
const savedUser = JSON.parse(localStorage.getItem("bca_user"));
if (savedUser && savedUser.name) {
welcomeText.textContent = "Welcome back, " + savedUser.name + "!";
usernameInput.value = savedUser.name;
}
// 2. Toggle and persist theme
themeBtn.addEventListener("click", () => {
const newTheme = document.body.className === "dark" ? "light" : "dark";
document.body.className = newTheme;
localStorage.setItem("bca_theme", newTheme);
});
// 3. Serialize and save object
saveBtn.addEventListener("click", () => {
const name = usernameInput.value.trim();
if (!name) return;
const userProfile = { name: name, lastLogin: new Date().toISOString() };
localStorage.setItem("bca_user", JSON.stringify(userProfile));
welcomeText.textContent = "Welcome back, " + name + "!";
});
// 4. Clear storage
clearBtn.addEventListener("click", () => {
localStorage.removeItem("bca_user");
welcomeText.textContent = "Welcome, Guest!";
usernameInput.value = "";
});
</script>
</body>
</html>2. Hands-On Practical Lab: Follow Instructions in VS Code
Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.
2 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type
Day 31 Practical Task Test Studio
Test Score:0 / 2 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Hydrate Preferences from LocalStorage
Use localStorage.getItem("bca_student_prefs") and JSON.parse() on page load to prefill the input fields if data exists.
⏳ WAITING
Task 2Serialize and Save Preferences
Assemble the input values into an object and save them using localStorage.setItem("bca_student_prefs", JSON.stringify(obj)).
⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing ActiveTab inserts 2 spaces • Live DOM refresh568 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
LiveRenders live HTML & CSS typed on the left.
Interactive Bug Detective
The "[object Object]" LocalStorage Corruption Bug
Tap or click on the exact line below that contains the error:
Click any code line⚠️ Broken Code Inspector
Tap buggy line1
const profile = { name: "Aman", semester: 1 };2
localStorage.setItem("student_profile", profile);3
4
// Later in code...5
const saved = JSON.parse(localStorage.getItem("student_profile"));6
console.log(saved.name); // ❌ SyntaxError: Unexpected token 'o', "[object Object]" is not valid JSONStuck? Need a detective clue before checking the solution?
Senior Developer Forensic Analysis:
localStorage only accepts strings. When passing an object directly without JSON.stringify(), JavaScript invokes profile.toString() which converts the object into the literal string "[object Object]". Attempting to JSON.parse("[object Object]") throws a fatal SyntaxError.
Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!
📝Independent Practice: Assignment
📄 index.htmlInteractive Persistent Student Profile & Study Notepad
- •Create a responsive student dashboard card with Dark/Light theme toggle.
- •Include an editable note textarea where student revision notes are auto-saved on every keystroke (input event) into localStorage.
- •Add a "Reset to Defaults" button that clears localStorage with confirm() verification.
- •Ensure the application displays an active status badge showing "Saved to LocalStorage" with a timestamp.
Submission Evaluation Criteria: Push index.html and styles.css to your GitHub repo under day-31 folder.
Exact Assignment Solution Code: index.html
Open Visual Studio Code on your PC (code .), create index.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BCA Day 31 - Persistent Study Notepad</title>
<style>
body { font-family: 'Segoe UI', sans-serif; background: #060c18; color: #fff; padding: 24px; transition: all 0.3s; }
body.light { background: #f8fafc; color: #0f172a; }
.card { max-width: 540px; margin: 0 auto; background: #0c1328; border: 1px solid #1e293b; border-radius: 12px; padding: 24px; }
body.light .card { background: #ffffff; border-color: #e2e8f0; }
textarea { width: 100%; height: 140px; background: #060c18; color: #fff; border: 1px solid #334155; border-radius: 8px; padding: 12px; box-sizing: border-box; }
body.light textarea { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
.actions { display: flex; gap: 10px; margin-top: 14px; }
button { flex: 1; padding: 10px; border-radius: 6px; border: none; font-weight: bold; cursor: pointer; }
.btn-theme { background: #2563eb; color: #fff; }
.btn-clear { background: #ef4444; color: #fff; }
.status { font-size: 12px; color: #10b981; margin-top: 8px; font-weight: bold; }
</style>
</head>
<body class="dark">
<div class="card">
<h2>📓 BCA Persistent Study Notepad</h2>
<textarea id="notesArea" placeholder="Type your revision notes here... (auto-saved)"></textarea>
<div class="status" id="saveStatus">Synced with LocalStorage ✅</div>
<div class="actions">
<button class="btn-theme" id="themeBtn">🌓 Toggle Theme</button>
<button class="btn-clear" id="clearBtn">🗑️ Clear Notes</button>
</div>
</div>
<script>
const notesArea = document.getElementById("notesArea");
const saveStatus = document.getElementById("saveStatus");
const themeBtn = document.getElementById("themeBtn");
const clearBtn = document.getElementById("clearBtn");
// Hydrate
notesArea.value = localStorage.getItem("bca_notes") || "";
const savedTheme = localStorage.getItem("bca_theme") || "dark";
document.body.className = savedTheme;
// Auto-save on input
notesArea.addEventListener("input", () => {
localStorage.setItem("bca_notes", notesArea.value);
saveStatus.textContent = "Saved at " + new Date().toLocaleTimeString();
});
themeBtn.addEventListener("click", () => {
const nextTheme = document.body.className === "dark" ? "light" : "dark";
document.body.className = nextTheme;
localStorage.setItem("bca_theme", nextTheme);
});
clearBtn.addEventListener("click", () => {
if (confirm("Clear all notes from browser storage?")) {
localStorage.removeItem("bca_notes");
notesArea.value = "";
saveStatus.textContent = "Storage cleared.";
}
});
</script>
</body>
</html>Verified Assignment Code Solution (100% Tested & Ready to Run)
🎓4. Viva Check: Mandatory Conceptual Test
What is the primary difference between localStorage and sessionStorage in modern browsers?
5. Mandatory Step: Push to GitHub to Unlock Next Lesson
Target Repo: html-css-projects
Windows 11 Terminal / VS Code
main
1$
mkdir day-31
Create a new project folder (day-31)
2$
cd day-31
Change working directory to day-31
3$
git checkout -b feature/day-31-localstorage
4$
git add index.html
5$
git commit -m "feat(day-31): implement web storage localstorage json serialization"
Commit staged changes with a descriptive message
6$
git push origin feature/day-31-localstorage
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ RequiredVS Code Implementation
Step 4 Viva Check
Own GitHub Project
RequiredExact GitHub Setup Guide & Expected Structure
Day 31 RequirementsFollow these exact folder and file names to prevent verification errors.
1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-31/ or bca-day-31/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 31
main
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 31
4$
mkdir day-31
Create a new project folder (day-31)
5$
cd day-31
Change working directory to day-31
6$
# 3. Create your code file: index.html
7$
# (Write your Day 31 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 31: Web Storage Architecture: localStorage, sessionStorage & JSON Serialization"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase
index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.2.Separate Day Folders: Create a new folder
day-31/ for today so you don't overwrite previous days.3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch
main.📁 github.com/YOUR_USERNAME/html-css-projects
Branch: mainREADME.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/Day 7 Prior Lesson
└──index.html
day-08/Day 8 Prior Lesson
└──index.html
day-09/Day 9 Prior Lesson
└──index.html
day-10/Day 10 Prior Lesson
└──index.html
└──styles.css
day-11/Day 11 Prior Lesson
└──index.html
day-12/Day 12 Prior Lesson
└──index.html
day-13/Day 13 Prior Lesson
└──index.html
day-14/Day 14 Prior Lesson
└──index.html
day-15/Day 15 Prior Lesson
└──index.html
day-16/Day 16 Prior Lesson
└──index.html
day-17/Day 17 Prior Lesson
└──index.html
day-18/Day 18 Prior Lesson
└──index.html
day-19/Day 19 Prior Lesson
└──index.html
day-20/Day 20 Prior Lesson
└──index.html
└──styles.css
day-21/Day 21 Prior Lesson
└──index.html
day-22/Day 22 Prior Lesson
└──index.html
day-23/Day 23 Prior Lesson
└──index.html
day-24/Day 24 Prior Lesson
└──index.html
day-25/Day 25 Prior Lesson
└──index.html
day-26/Day 26 Prior Lesson
└──index.html
day-27/Day 27 Prior Lesson
└──index.html
day-28/Day 28 Prior Lesson
└──index.html
day-29/Day 29 Prior Lesson
└──index.html
day-30/Day 30 Prior Lesson
└──index.html
└──styles.css
day-31/✨ CREATE THIS FOLDER FOR TODAY (Day 31)
└──index.htmlMust contain:
Sequential Progression Enforced
You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 31 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 30: Sprint 3 Capstone: Interactive Student SGPA & Grade Portal first.
Complete Day 30 FirstCurriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal