Storing Todos Locally

Topic Overview and Actualization

Hello, and welcome to our journey about todo lists! In this lesson, we delve into the world of Data Persistence and Local Storage . We're going to figure out how to store our todo items right on our own machine, specifically in the web browser. By the end of this lesson, you'll be well-equipped to store and retrieve data even after the browser is closed and reopened. This feature gives the user freedom from the fear of losing their data accidentally. It's as if we're creating our own mini-database right in our web browser. So, let's plow ahead and get on with this exciting journey!

Introduction to Local Storage

Local storage is a type of web storage that allows JavaScript websites and apps to store and access data right in the browser with no expiration time. It's like a small database that lives in your browser. Even after closing and reopening the browser, the data persists, giving us a form of data persistence. Can you think of examples where this could prove useful? Imagine you're filling out a lengthy form and accidentally refresh the page. Without local storage, all the information you've filled out would be lost. But if the website cleverly stored this data in local storage as you were filling it out, it could conveniently recover it, recovering your data and saving you time. Local storage could make this clever recovery possible. Now let's see how we can use it to store our todo items.

localStorage Methods

First, let's look at the local storage toolbox. There are three primary methods that are of utmost importance in using local storage: setItem, getItem, and removeItem . At its core, local storage is like a box with many compartments, and we store data in these compartments. But to fetch the data or remove it when it's no longer needed, we need some tools, right? That's what these methods essentially are — our tools to work with local storage. setItem method: This is used to put data into local storage. It's like putting a thing into a compartment of our box. It requires two arguments: a key and a value. The key is the name of the compartment, and the value is the thing itself. Let's put something into our local storage: JavaScript localStorage.setItem('favoriteColor', 'Blue'); Here, favoriteColor is the key, and Blue is the value. So, we've stored Blue into a compartment named favoriteColor . getItem method: Once our data is in local storage, we need a way to retrieve it. That's what getItem does. The key is required as an argument to access the compartment, as shown below: JavaScript const myFavoriteColor = localStorage.getItem('favoriteColor'); console.log(myFavoriteColor); // Displays Blue on the console Here, we are fetching data from the compartment named favoriteColor . So, myFavoriteColor will hold the value Blue . removeItem method: Sometimes, we no longer need the data we put in local storage, so we need to remove it. This is done using removeItem . JavaScript localStorage.removeItem('favoriteColor'); We can see that favoriteColor is removed from local storage. If you try to get favoriteColor now, it will return null because it's not in local storage anymore.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Saving our Todo List

In our todo application, we have a function called saveTodos. Its role is like a very efficient librarian who checks the todos (like books in a library), collects them all, and puts them nicely into local storage (like a library's shelves). Every time a change is made to our todos, like adding a new todo or marking a todo as completed, the librarian immediately updates the storage, ensuring the correct state of todos is maintained.

Here's the code for the saveTodos function:

JavaScript

function saveTodos() {
    const todos = [];
    document.querySelectorAll('#todo-list li').forEach(li => {
        const todoText = li.childNodes[1].nodeValue;
        const isChecked = li.childNodes[0].checked;
        todos.push({ text: todoText, checked: isChecked });
    });
    localStorage.setItem('todos', JSON.stringify(todos));
}

function saveTodos() {
    const todos = [];
    document.querySelectorAll('#todo-list li').forEach(li => {
        const todoText = li.childNodes[1].nodeValue;
        const isChecked = li.childNodes[0].checked;
        todos.push({ text: todoText, checked: isChecked });
    });
    localStorage.setItem('todos', JSON.stringify(todos));
}

Let's go through it step-by-step:

We define an empty array todos.
We use document.querySelectorAll('#todo-list li') to get all the list items (i.e., our todos), then use the forEach method to loop through each item.
For each item, we get its text content and whether its checkbox is checked. We then create an object representing our todo and add it to our todos array.
Finally, we call localStorage.setItem to store the todos array in local storage. Since local storage can only store strings, we use JSON.stringify(todos) to convert the array into a string format.

To see the stored todos in your console, you can use the getItem method to fetch the 'todos' item from local storage. This will return the stored string representation of the todos' array, which you can then log to the console to inspect:

JavaScript

console.log(localStorage.getItem('todos'));

console.log(localStorage.getItem('todos'));

When you run this, you'll see the stringified array of todos:

JSON

[{"text":"Item 1","checked":false},{"text":"Item 2","checked":true},{"text":"Item 3","checked":false}]

[{"text":"Item 1","checked":false},{"text":"Item 2","checked":true},{"text":"Item 3","checked":false}]

This output shows that we have three todos. The first todo ("Item 1") is not checked, the second todo ("Item 2") is checked, and the third todo ("Item 3") is not checked. By logging the value stored in local storage, we can verify that our todos are being saved correctly.

Loading our Todo List

Our loadTodos function is like the opposite of saveTodos. It's our trusted librarian who, when the library opens, gets all the books (i.e., todos) from the shelves (i.e., local storage) and arranges them for viewing. The function code is as follows:

JavaScript

function loadTodos() {
    const todos = JSON.parse(localStorage.getItem('todos'));
    if (todos) {
        todos.forEach(todo => {
            const li = document.createElement('li');
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = todo.checked;
            checkbox.addEventListener('change', function() {
                if (checkbox.checked) {
                    li.style.textDecoration = 'line-through';
                } else {
                    li.style.textDecoration = 'none';
                }
                saveTodos();
            });
            
            li.appendChild(checkbox);
            li.appendChild(document.createTextNode(todo.text));
            
            document.getElementById('todo-list').appendChild(li);

            if (todo.checked) {
                li.style.textDecoration = 'line-through';
            }
        });
    }
}

function loadTodos() {
    const todos = JSON.parse(localStorage.getItem('todos'));
    if (todos) {
        todos.forEach(todo => {
            const li = document.createElement('li');
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = todo.checked;
            checkbox.addEventListener('change', function() {
                if (checkbox.checked) {
                    li.style.textDecoration = 'line-through';
                } else {
                    li.style.textDecoration = 'none';
                }
                saveTodos();
            });
            
            li.appendChild(checkbox);
            li.appendChild(document.createTextNode(todo.text));
            
            document.getElementById('todo-list').appendChild(li);

            if (todo.checked) {
                li.style.textDecoration = 'line-through';
            }
        });
    }
}

Here, we are fetching our todos from local storage using localStorage.getItem. But why are we surrounding it with JSON.parse? Well, remember that we stored our todos as a string with JSON.stringify. Now, we need to turn it back into an array of objects we can use in JavaScript, and JSON.parse does exactly that. The rest of the code within the function body creates li elements just like before, with all the event listeners, and adds them to the todo list in the same arrangement they were stored in.

Putting it all Together

Now let's take all the pieces we've discussed and put them together into a cohesive whole. We'll create a simple todo list application that can add, display, and save todos, allowing us to see exactly how local storage can be implemented in a real-world scenario.

Adding a New Todo: We'll use an input field and a button to add new todos to the list.
Saving Todos: Each new todo will be saved in local storage so that it persists across browser sessions.
Loading Todos: When the page is loaded, todos from local storage will be displayed.
Toggling Complete Status: Each todo will have a checkbox to mark it as complete, and its status will be stored in local storage.

Here's the full code to implement this functionality:

JavaScript

document.getElementById('add-btn').addEventListener('click', function() {
    const newTodo = document.getElementById('new-todo').value;
    if (newTodo.trim() === '') return;
    
    const li = document.createElement('li');
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.addEventListener('change', function() {
        if (checkbox.checked) {
            li.style.textDecoration = 'line-through';
        } else {
            li.style.textDecoration = 'none';
        }
        saveTodos();
    });
    
    li.appendChild(checkbox);
    li.appendChild(document.createTextNode(newTodo));
    
    document.getElementById('todo-list').appendChild(li);
    document.getElementById('new-todo').value = '';
    
    saveTodos();
});

function saveTodos() {
    const todos = [];
    document.querySelectorAll('#todo-list li').forEach(li => {
        const todoText = li.childNodes[1].nodeValue;
        const isChecked = li.childNodes[0].checked;
        todos.push({ text: todoText, checked: isChecked });
    });
    localStorage.setItem('todos', JSON.stringify(todos));
}

function loadTodos() {
    const todos = JSON.parse(localStorage.getItem('todos'));
    if (todos) {
        todos.forEach(todo => {
            const li = document.createElement('li');
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = todo.checked;
            checkbox.addEventListener('change', function() {
                if (checkbox.checked) {
                    li.style.textDecoration = 'line-through';
                } else {
                    li.style.textDecoration = 'none';
                }
                saveTodos();
            });
            
            li.appendChild(checkbox);
            li.appendChild(document.createTextNode(todo.text));
            
            document.getElementById('todo-list').appendChild(li);

            if (todo.checked) {
                li.style.textDecoration = 'line-through';
            }
        });
    }
}

document.addEventListener('DOMContentLoaded', loadTodos);

document.getElementById('add-btn').addEventListener('click', function() {
    const newTodo = document.getElementById('new-todo').value;
    if (newTodo.trim() === '') return;
    
    const li = document.createElement('li');
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.addEventListener('change', function() {
        if (checkbox.checked) {
            li.style.textDecoration = 'line-through';
        } else {
            li.style.textDecoration = 'none';
        }
        saveTodos();
    });
    
    li.appendChild(checkbox);
    li.appendChild(document.createTextNode(newTodo));
    
    document.getElementById('todo-list').appendChild(li);
    document.getElementById('new-todo').value = '';
    
    saveTodos();
});

function saveTodos() {
    const todos = [];
    document.querySelectorAll('#todo-list li').forEach(li => {
        const todoText = li.childNodes[1].nodeValue;
        const isChecked = li.childNodes[0].checked;
        todos.push({ text: todoText, checked: isChecked });
    });
    localStorage.setItem('todos', JSON.stringify(todos));
}

function loadTodos() {
    const todos = JSON.parse(localStorage.getItem('todos'));
    if (todos) {
        todos.forEach(todo => {
            const li = document.createElement('li');
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = todo.checked;
            checkbox.addEventListener('change', function() {
                if (checkbox.checked) {
                    li.style.textDecoration = 'line-through';
                } else {
                    li.style.textDecoration = 'none';
                }
                saveTodos();
            });
            
            li.appendChild(checkbox);
            li.appendChild(document.createTextNode(todo.text));
            
            document.getElementById('todo-list').appendChild(li);

            if (todo.checked) {
                li.style.textDecoration = 'line-through';
            }
        });
    }
}

document.addEventListener('DOMContentLoaded', loadTodos);

This example provides a comprehensive demonstration of how local storage can be used to enhance a todo list application by preserving data between sessions.

Topic Overview and Actualization

Introduction to Local Storage

localStorage Methods

Join the 1M+ learners on CodeSignal

Saving our Todo List

Saving After Each Change

Loading our Todo List

Autoloading our Todos

Putting it all Together

Local Storage Capacity Limits

Lesson Summary