Practice & Assessment
Test your understanding of Browser Storage and State Management
Multiple Choice Questions
5A user closes their browser and reopens it. Which storage mechanism retains its data?
Which cookie attribute prevents JavaScript from reading the cookie via document.cookie?
The storage event fires on window. In which tab does it NOT fire?
You call localStorage.setItem('count', 42). What is actually stored?
What is the primary advantage of IndexedDB over localStorage for large datasets?
Coding Challenges
1Persistent Dark Mode Toggle
Build a page with a theme toggle button (#theme-btn). Clicking it toggles class .dark-mode on document.body. The current theme must be saved to localStorage so it persists across page reloads. On page load, read the saved theme and apply it before rendering. The button label must change to 'Switch to Dark' or 'Switch to Light' based on current theme. Input: button click. Output: persisted theme applied on reload. Constraint: no cookies, no sessionStorage, no frameworks. Estimated time: 15-20 minutes.
Mini Project
Offline-Capable Notes App
Build a notes app using the client-side state manager pattern from lesson 5.4. Requirements: a textarea to write a note with a title input, a Save button that adds the note to an array in localStorage via setState, a list rendering all saved notes as cards with a Delete button per card, a search input that filters displayed notes by title in real time without mutating stored state, and a theme toggle (dark/light) that also persists. All UI must re-render by subscribing to the store. Implement cross-tab sync using the storage event so notes added in one tab appear in other open tabs automatically.