CodingNic

Persistence

Create the Save Function

Persistence 12 min read

Create the Save Function

Create the Save Function

Start by giving persistence one clear responsibility: turn the current tasks array into text and store it in the browser.

Open app.js and add a small function near your state and helper functions:

javascript
function saveTasks() {
  localStorage.setItem("kanbanTasks", JSON.stringify(tasks));
}

localStorage stores strings, so JSON.stringify() converts the array of task objects into a string that can be stored.

Keep the storage key in one place. In this project, the key is kanbanTasks.

You do not need to call the function everywhere yet. First make sure the helper exists and does one job.

Checkpoint

Temporarily call saveTasks() after your initial task data is created.

Open the browser’s developer tools and inspect Local Storage for the page. You should see a kanbanTasks entry containing JSON data.

After checking it, remove the temporary call if you do not want the initial sample data written permanently. The next lesson will place the save call after real user actions.