Saving a Simple To-Do List to Local Storage: the addEventListener Version

In this article we are going to work on JS version that uses “addEventListener” method instead of the “onclick” in HTML, which is perhaps considered more primitive and suitable for complete beginners. The code bellow already has the possibility to adds tasks to the list, and a complete and delete button. What we’ll now add is:

• A saveTasks() function to store the tasks in local storage.
• A loadTasks() function to load saved tasks when the page loads.

This means we will update the existing code to save changes whenever a task is added, completed, or deleted, even after the browser window is closed or refreshed.

Let’s take a look at code we’ll be working on:

document.getElementById("addButton").addEventListener("click", addTask);

function addTask() {
    let taskInput = document.getElementById("taskInput");
    let taskList = document.getElementById("taskList");

    if (taskInput.value === "") {
        alert("Please enter a task!");
        return;
    }
   

    let li = document.createElement("li");
    li.textContent = taskInput.value;

    // Add a complete button
    let completeButton = document.createElement("button");
    completeButton.textContent = "✓";
    completeButton.style.marginLeft = "10px";
    completeButton.onclick = function () {
        li.classList.toggle("completed");
    };

    // Add a delete button
    let deleteButton = document.createElement("button");
    deleteButton.textContent = "❌";
    deleteButton.style.marginLeft = "10px";
    deleteButton.onclick = function () {
        taskList.removeChild(li);
    };

    li.appendChild(completeButton);
    li.appendChild(deleteButton);
    taskList.appendChild(li);
    
    taskInput.value = ""; // Clear input after adding
} 

Step 1: Add saveTasks() function

Place this function below addTask():

function saveTasks() {
    let tasks = [];
    let items = document.querySelectorAll("#taskList li");
    items.forEach((li) => {
        tasks.push({
            text: li.firstChild.textContent.trim(),
            completed: li.classList.contains("completed")
        });
    });
    localStorage.setItem("tasks", JSON.stringify(tasks));
}

The purpose of saveTasks() is to:

• Collect all current tasks from the list you see on the screen.
• Store those tasks (and their “completed” status) in the browser’s local storage, so the to-do list persists after refreshing the page.

With let tasks = []; we create an empty array named tasks and as we add tasks we’re going to fill this array with task objects, like { text: “Buy milk”, completed: false } Each of these object represents one task with two pieces of information – the text of the task (what the user typed), and whether the task is completed or not.

let items = document.querySelectorAll(“#taskList li”); finds all the <li> elements inside the <ul> with id=”taskList”. For example, if your HTML looks like this:

<ul id="taskList">
  <li>Buy milk ✓ ❌</li>
  <li class="completed">Do laundry ✓ ❌</li>
</ul>

document.querySelectorAll(“#taskList li”) will return a NodeList (kind of like an array) with those two <li> elements.

items.forEach((li) => { … }) is a loop. It goes through every <li> element (i.e., every task in the list). And li refers to the current task we’re looking at in the loop. Inside that loop, we’re going to create an object that represents this task.

But what is happening inside the loop?

tasks.push({
    text: li.firstChild.textContent.trim(),
    completed: li.classList.contains("completed")
});

li.firstChild gets the text node — this is the part of the <li> that contains the task text (not the buttons) and textContent gets the actual text. .trim() removes any extra spaces at the beginning or end of the text.

So if the task was:

<li>Buy milk <button>✓</button> <button>❌</button></li>
It will grab just “Buy milk”.

The part completed: li.classList.contains(“completed”) checks if the <li> has the class completed. Returns true if it’s completed (crossed out), or false if not.

tasks.push(…) adds the task object to our tasks array and after the loop finishes, this array contains every task currently visible on the page.

localStorage.setItem(“tasks”, JSON.stringify(tasks)); is about saving an array of task objects. We use JSON.stringify(tasks) to turn the array into a string, because local storage only stores strings — it can’t store objects directly. Then we store it in local storage under the key “tasks”. An example of a saved string would look like this:

[
  { "text": "Buy milk", "completed": false },
  { "text": "Do laundry", "completed": true }
]

Now, this data is safely stored in the user’s browser and will stay there even if the page is refreshed or closed.

So, in a quick summary the saveTasks() function as presented above :

• Looks at every task on the page.
• Turns each one into an object with text + completed status.
• Adds those objects into an array.
• Converts the array into a string using JSON.stringify.
• Saves that string to local storage using localStorage.setItem().

This way, whenever the task list changes, this function should be called to keep the saved data updated.

2nd step: Modify addTask() to call saveTasks()

We’ll call saveTasks() in three places:

• After adding a task
• After marking it complete
• After deleting

Here’s the updated addTask() with those changes – we’ve commented it so you can notice the the the saveTask() call:

function addTask() {
    let taskInput = document.getElementById("taskInput");
    let taskList = document.getElementById("taskList");

    if (taskInput.value === "") {
        alert("Please enter a task!");
        return;
    }

    let li = document.createElement("li");
    li.textContent = taskInput.value;

    // Add a complete button
    let completeButton = document.createElement("button");
    completeButton.textContent = "✓";
    completeButton.style.marginLeft = "10px";
    completeButton.onclick = function () {
        li.classList.toggle("completed");
        saveTasks(); // save when task is toggled
    };

    // Add a delete button
    let deleteButton = document.createElement("button");
    deleteButton.textContent = "❌";
    deleteButton.style.marginLeft = "10px";
    deleteButton.onclick = function () {
        taskList.removeChild(li);
        saveTasks(); // save when task is deleted
    };

    li.appendChild(completeButton);
    li.appendChild(deleteButton);
    taskList.appendChild(li);

    taskInput.value = ""; // Clear input after adding

    saveTasks(); // save after task is added
}

3rd step: Add loadTasks() function

This function will rebuild all saved tasks when the page is loaded, so when you refresh the page, all the tasks in the browser window are gone — but they’re still saved in local storage. This function retrieves those saved tasks and puts them back into the to-do list, exactly like they were before: same text, same completed status, and working buttons.

function loadTasks() {
    let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
    let taskList = document.getElementById("taskList");

    tasks.forEach(task => {
        let li = document.createElement("li");
        li.textContent = task.text;

        if (task.completed) {
            li.classList.add("completed");
        }

        let completeButton = document.createElement("button");
        completeButton.textContent = "✓";
        completeButton.style.marginLeft = "10px";
        completeButton.onclick = function () {
            li.classList.toggle("completed");
            saveTasks();
        };

        let deleteButton = document.createElement("button");
        deleteButton.textContent = "❌";
        deleteButton.style.marginLeft = "10px";
        deleteButton.onclick = function () {
            taskList.removeChild(li);
            saveTasks();
        };

Let’s go through the function in chunks. Let’s start at the top with let tasks = JSON.parse(localStorage.getItem(“tasks”)) || [];:

• localStorage.getItem(“tasks”) gets the string of saved tasks.
• JSON.parse(…) converts that string back into a JavaScript array.
• And if there’s nothing saved yet (like on first visit), getItem() returns null. So || [] makes sure we still have an empty array to work with, to avoid errors.

This part of the code let taskList = document.getElementById(“taskList”); selects the <ul> element from your HTML where all the <li> tasks will go.

with tasks.forEach(task => { we go through every task that was saved in local storage. For each one, we rebuild the task visually on the page and reattach its buttons and behavior.

We create the task item (<li>) with the following code and its text is set to whatever the task’s text was:

let li = document.createElement("li");
li.textContent = task.text;

With this – if the saved task was marked as completed, we add the “completed” class, which visually crosses out the task and makes it gray:

if (task.completed) {
    li.classList.add("completed");
}

We recreate the complete button and when clicked: it toggles the “completed” class (adds/removes it). Then it calls saveTasks() to update local storage with the new status:

let completeButton = document.createElement("button");
completeButton.textContent = "✓";
completeButton.style.marginLeft = "10px";
completeButton.onclick = function () {
    li.classList.toggle("completed");
    saveTasks();
};

In a similar manner we recreate the Delete button which when clicked removes this task from the visible list. saveTasks() call again updates local storage and remove it there too.

let deleteButton = document.createElement("button");
deleteButton.textContent = "❌";
deleteButton.style.marginLeft = "10px";
deleteButton.onclick = function () {
    taskList.removeChild(li);
    saveTasks();
};

We add everything to the page with

li.appendChild(completeButton);
li.appendChild(deleteButton);
taskList.appendChild(li);

This code adds the two buttons (delete and complete) into the task (<li>), and then adds the task to the list (<ul>), so it appears on the page.

If we summary what loadTask() function does:

• Reads tasks from local storage (as an array of objects).
• For each task:
  • 1. Creates a list item
  • 2. Restores the text and completion state
  • 3. Rebuilds the complete and delete buttons
  • 4. Hooks everything back up (so it works exactly like a newly added task)
  • 5. Adds it to the visible task list on the webpage.

This way, the user sees all the same tasks they had before, including which ones were completed — and the app continues working just like before.

4th Step: Call loadTasks() when the page loads

At the very bottom of your JavaScript file (after defining loadTasks()), add:

loadTasks();

This will make sure all saved tasks are displayed every time the user opens or refreshes the page.

Conclusion

And that’s it! With saveTasks() and loadTasks() in place, your to-do list now saves every change and reloads all tasks when the page opens. By combining addEventListener with local storage, you’ve created a simple but powerful JavaScript app that feels more polished and user-friendly. As a next step, you could explore features like editing tasks, adding due dates, or filtering completed items—but for now, you’ve got the solid foundation of a persistent task manager.