Saving a Simple To-Do List to Local Storage Using “onclick” in HTML

In this article we’re going to build on our previous project: 3 JavaScript versions of simple to-do list. Let’s try adding a new useful feature – let’s save the task we add to local storage. Local Storage is a feature in your browser that lets you save data, in our case — tasks — even after the page is refreshed or the browser is closed and reopened.

In this article we will be using onclick in HTML, which is probably the easiest method to understand for complete beginners. You simply attach the addTask() function directly to the button using the onclick attribute inside the HTML. While this works fine for small projects, it’s not considered best practice because it mixes your structure (HTML) with your behavior (JavaScript), which can make your code harder to manage in the long run. We will focus on better practices
in our next article.

Local storage serves like a mini database in your browser — it stores data as key-value pairs. Another things worth mentioning at this point is that both the key and the value must be strings. Now, let’s take a look at the old code and see what we will be working on:

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
}

What exactly we want to do?

Right now, with the code above our tasks disappear when the page reloads. We want to:

• Save tasks to local storage when a task is added.
• Load tasks from local storage when the page is opened.
• Update local storage when a task is deleted or marked complete.

Let’s go step-by-step.

Step 1: Create a function to save tasks

We’ll collect all tasks currently in the list and save them in local storage. And to do this, we need to add this function below our addTask() function:

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));
}

Let’s analyze what this code does:
With function saveTasks() { we define a function called saveTasks. We’ll call this function every time we make a change (add, complete, delete) to keep local storage updated.

let tasks = []; creates an empty array named tasks, which we’ll use to store all the tasks as objects like this: { text: “Buy groceries”, completed: false }

let items = document.querySelectorAll(“#taskList li”); gets all the <li> elements inside the <ul> with ID taskList. These <li> elements are the individual tasks the user has added. querySelectorAll() returns a list of all matching elements (even if there are 10, 20, or more tasks).

items.forEach((li) => { … }) This part represents a loop. It goes through each <li> (task) in the list. li is just the name we’re using for the current list item in the loop. But what is happening inside the loop? Let’s break that down:

text: li.firstChild.textContent.trim() This part gets the text of the task. li.firstChild grabs the text node — the first part of the <li> that is the task name (not the buttons) and .textContent gets the actual text (e.g. “Buy milk”). .trim() removes any extra spaces in the text the user types from the beginning or end. This part completed: li.classList.contains(“completed”) checks whether the task has the completed class. If yes, it means the task is marked as done or true in our case, as the values are stored either true or false. So now we’re pushing an object into the tasks array like this: { text: “Buy milk”, completed: true }, which means that task is completed.
This part localStorage.setItem(“tasks”, JSON.stringify(tasks)); says localStorage.setItem(key, value) saves data to the browser’s storage. In our case the key is “tasks” — like the name of the folder where we’re storing our data. And since the value must be a string, we use JSON.stringify(tasks) to convert the whole array of objects into a string format.

Step 2: Call saveTasks() inside your addTask() and delete functions

We will update our addTask() function by adding saveTasks() at the bottom:

taskList.appendChild(li);
taskInput.value = "";
saveTasks(); // Save tasks to localStorage

And also update the delete button code:

deleteButton.onclick = function () {
    taskList.removeChild(li);
    saveTasks(); // Save updated list
};

And finally, add it to your complete button too, so it remembers when tasks are marked as done:

completeButton.onclick = function () {
    li.classList.toggle("completed");
    saveTasks(); // Save completed state
};

Step 3: Load tasks when the page loads

At the bottom of your JS file, add this function to load and recreate saved tasks:

function loadTasks() {
    let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
    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();
        };

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

What this function does is 1. gets the saved data from localStorage,
2. parses it back into an array, and 3. recreates each <li> element and buttons.

If we take a closer look at

let tasks = 
JSON.parse(localStorage.getItem("tasks")) || [];

:

• localStorage.getItem(“tasks”) retrieves the string of saved tasks from localStorage;
• we need to use JSON.parse(…) to convert the string back into a JavaScript array of task objects because the data was stored using JSON.stringify(…).

If there are no tasks stored yet (like the first time you visit the page), this will return null, so we use || [] to fall back to an empty array.

Now tasks is an array that looks like this:

[
  { text: "Buy milk", completed: true },
  { text: "Read a book", completed: false }
]

With

tasks.forEach(task => {
    // create the <li> and buttons
});

we loop through each task and rebuild it:
This goes through each task in the array and performs the same steps we would when manually adding a task. So, for each task, we create an <li> element; set its text from task.text, and if the task is marked as completed (task.completed is true), we add the completed class to cross it out visually.

And then within the loop, we create a “✓” (complete) button again and attach the click behavior. So, when clicked, it toggles the completed class on that task.

As you can see, it also calls saveTasks() again to update the local storage so the task’s new “completed” state is remembered. This makes sure checking and unchecking a task is saved and persists on refresh.

The next part of this code is about re-creating the Delete button
We also create a “❌” (delete) button just like we did in addTask(). When clicked, it removes the task from the list. Then it calls saveTasks() to update local storage to reflect the change. This ensures the deleted task is also removed from storage and doesn’t reappear when you refresh.

At the end we need to put it all together – after creating the list item (li) and the two buttons, we append the buttons to the task, then the task to the list with the appendChild method – this adds everything back into the DOM (your visible to-do list) so the page looks exactly like it did before the refresh — same tasks, same order, same completed status.

Step 4: Call loadTasks() when the page loads

So, whenever you reload the page, your tasks will come back — even the completed ones! But to achieve this, add this line at the bottom of your JS file (after defining loadTasks()):

loadTasks();

So at the end, your HTML code and JS code should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><Simple To-Do List/title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="container">
        <h2>To-Do List</h2>
        <input type="text" id="taskInput" placeholder="Enter a task">
        <button onclick="addTask()>"<Add Task/button> 

        <ul id="taskList"></ul>
    </div>
    
        <script src="script.js>"</script>
    </body>
    </html>

And .JS:

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

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

    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));
    }


    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 completed state 
    };

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

    li.appendChild(completeButton);
    li.appendChild(deleteButton);
    taskList.appendChild(li);
    
    taskInput.value = ""; // Clear input after adding
    saveTasks(); // Save tasks to localStorage

}

function loadTasks() {
    let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
    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();
        };

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

loadTasks();

In Conclusion – full summary of what we did

saveTasks() collects tasks and saves them to localStorage.

We call saveTasks() every time a task is added, deleted, or toggled.

loadTasks() reads tasks from localStorage and rebuilds them when the page loads.