CodingNic

Persistence

Make Loading More Resilient

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:

javascript
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.