⚙️ Module 13 · HTML5 APIs🟡 IntermediateLESSON 46 · MODULE FINAL
Web Storage
Course progress41%
🎯 What you'll learn:
localStorage vs sessionStorage, the setItem/getItem API, storing structured data as JSON, and storage limitations.
Section 1
localStorage vs sessionStorage
Both store key-value string pairs directly in the browser. localStorage persists indefinitely, even after closing the browser. sessionStorage is cleared the moment the tab is closed — it only lasts for that one session.
| API | Lifetime | Shared across tabs? |
|---|---|---|
| localStorage | Until explicitly cleared | Yes — same origin, any tab |
| sessionStorage | Until the tab closes | No — isolated per tab |
Section 2
setItem, getItem & removeItem
storage-basic.html
HTML
<script> localStorage.setItem('theme', 'dark'); console.log(localStorage.getItem('theme')); // "dark" localStorage.removeItem('theme'); localStorage.clear(); // wipes everything for this origin </script>
Section 3
Storing JSON
Web Storage only stores strings — you can't save an object or array directly. Use JSON.stringify() before saving and JSON.parse() after reading to work with structured data.
storage-json.html
HTML
<script> const prefs = { theme: 'dark', fontSize: 16 }; localStorage.setItem('prefs', JSON.stringify(prefs)); const saved = JSON.parse(localStorage.getItem('prefs')); console.log(saved.fontSize); // 16 </script>
⚠️
Never store sensitive data
localStorage is plain text, readable by any script running on the page (including third-party ones) and visible in DevTools — never store passwords, tokens meant to stay secret, or personal data there.
Section 4
Storage Limitations
Most browsers cap Web Storage around 5-10MB per origin. It's synchronous, which can block the main thread for very large reads/writes — for anything bigger or more complex, IndexedDB is the appropriate tool instead.
🧩 Knowledge Check — Lesson 46
5 questions to test your understanding.
1. Which storage persists after the browser is fully closed and reopened?
2. How do you convert an object into a string for storage?
3. Should you store a user's password in localStorage?
4. Is sessionStorage shared between two different tabs of the same site?
5. What should you use instead of Web Storage for large or complex data?
Coding Challenge — Lesson 46
Apply what you learned · Intermediate Level
Challenge: Build a Persisted To-Do List
Write JS that stores an array of to-do strings in localStorage as JSON, reads it back on page load, and logs each item to the console.
Write JS that stores an array of to-do strings in localStorage as JSON, reads it back on page load, and logs each item to the console.
💡 Show hints if you're stuck
- Use JSON.stringify(todos) to save, JSON.parse(localStorage.getItem('todos') || '[]') to read.
✅
Module 13 Complete!
You've mastered data attributes, drag & drop, geolocation, and web storage. Next up: Advanced HTML Elements, starting with Responsive Images.
Finished this lesson?
Mark it complete to track your progress.
Lesson 46 of 62Final Lesson — Module 13