Persistence
12 min read
Make Loading More Resilient
Make Loading More Resilient
Browser storage is outside React. A stored value can be missing, manually edited, or malformed, so the reader should not assume that every stored string is valid JSON.
Update loadTasks so parsing is protected:
function loadTasks() {
const saved = localStorage.getItem(STORAGE_KEY);
if (!saved) return starterTasks;
try {
return JSON.parse(saved);
} catch {
return starterTasks;
}
}
The try/catch keeps a bad stored value from preventing the app from starting.
For this practice project, the sample task list is a sensible fallback. You do not need a backend or a database to make this application useful.
Checkpoint
With the app open, replace the stored value for taskboard-tasks with invalid JSON using your browser’s developer tools. Reload the page. The app should fall back to the sample tasks instead of crashing.