Lesson 8
Browser storage
Build a practical mental model for browser storage and use it in working JavaScript.
By the end, you will be able to…
- Explain browser storage in your own words
- Use browser storage in a small program
- Recognize and debug a common failure mode
Build the mental model
localStorage persists string data on the user's device across page reloads and browser restarts, with no expiration until explicitly cleared. Since it only stores strings, objects must be serialized with JSON.stringify/parse.
Syntax and working example
Read the code from inputs to output. Predict what it prints, then run it and change one value.
Why this matters
It's the simplest way to remember user preferences or app state without a backend, and it's exactly how this platform's own progress tracking works.
Real-world example
This very platform stores your lesson, challenge, and quiz progress in localStorage as versioned JSON.
Common mistakes
- Forgetting to JSON.stringify an object before storing it (it becomes "[object Object]")
- Not wrapping JSON.parse in a try/catch when reading back potentially corrupted data
- Assuming localStorage is available (it can throw in private browsing or be disabled)
Try it yourself
Challenge
Write safeParse(json, fallback) that never throws on invalid JSON.
Knowledge check
Why must objects be JSON.stringify'd before storing them in localStorage?
Summary
Use localStorage for simple device-local persistence, always serializing objects and guarding parse failures.