Create the Storage Helpers

Start by keeping the browser-storage details in one small place. This makes the rest of the app easier to read.

Open src/App.jsx and define a storage key near the starter task data:

const STORAGE_KEY = "taskboard-tasks";

Then create a helper for saving an array of tasks:

function saveTasks(tasks) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}

localStorage stores strings, so JSON.stringify converts the JavaScript array into a string.

Create a matching reader:

function loadTasks() {
  const saved = localStorage.getItem(STORAGE_KEY);

  if (!saved) return starterTasks;

  return JSON.parse(saved);
}

The fallback is important for a first visit. A learner who has never saved anything should still see the prepared sample tasks.

Checkpoint

The board should still look the same. Nothing is saved automatically yet. You have simply isolated the two browser-storage operations you will use next.