How To Create A Simple To Do List App Using HTML, CSS, JS, and PHP – Part 6

This is the continuation of a series of tutorials about creating a to-do list web application, if you haven’t checked out the entire tutorial please start from Part 1.

In this part, we are going to add back in the ability to add new to-do list items to our webpage as well as saving and retrieving our list items into the browser’s local storage or cache. This will allow us to reload the page, or even close the browser and retain the list items we created. Local storage is explained in a post in more depth in another post that will be linked at the bottom of this post.

Firstly, let’s add a ‘click’ event listener to the button we have, as we have done before. However, we will be adding the new item to the page via our new JavaScript object array. We first grab the button element using a document selector and then add a click event listener with a function callback parameter.

Next, we need to grab the input element, the text field, and the text value of that element. This will be whatever the user has typed into that field and will be the content of the new list item.

If you remember from the last tutorial, our list items each have a unique ‘id’ attribute. These ids allow us to identify and differentiate the different list items. We need to give our new list item a unique id. We will do this by finding the largest number currently used as an ‘id’ and then using the next number up, so if the largest id value we have is the number 3 the next list item will have an id value of 4.

We do this by first using the ‘map’ function to get an array of just the id values from our data array. A post will be linked below to explain the map function in more depth if you’re not familiar. Basically we are taking the array of to-do list items and create a new array that contains only the ‘id’ attributes from each item. Then we get the maximum value from that array and increment it by 1 to get our new id value. We use the ‘Math.max’ function which is a built-in function in JavaScript and then use the ‘apply’ function. This isn’t necessarily needed you could get away with just calling the max function like this: ‘Math.max(ids);’. Finally we a defensive line of code in which will set out ‘nextId’ value to 0 if there are no items in our data array, this means if we delete all the items and then try and create a new one it will have the id value of 0.

Now we need to create a new object to contain the details for our new to-do list item. We add three fields, which are the same as the fields for each item in our ‘data’ list, ‘id’, ‘text’ and ‘isDone’. We use the id value we just calculated for its id, the input field text value for its text attribute and we start the new to-do list item off with a ‘false’ value for ‘isDone’. This means the item won’t be checked or crossed out when initially added.

Finally, we need to add the newly created item object to the main data array. We then set the input field ‘value’ attribute to an empty string, so that you don’t have to manually delete the text from the newly added to-do item. At the end, we call the render function so that the new item is rendered onto the HTML page. Now you should be able to add new items to the page, this will visually look the same as a few tutorials ago but under the hood the items are stored in JavaScript rather than just adding elements onto the page.

Storing the items into a JavaScript array also gives us one more advantage, we will now be able to easily store them into the local storage or cache of the browser without having to parse the HTML and extract the item details manually. The local storage object in JavaScript allows us to save and retrieve string values into the browser cache, we can only save string variables so we have to convert our data object into a string before we can save it.

We can use JSON to convert an object into a string value. Below we use the ‘onbeforeload’ function, which will get called just before the user closes the webpage or browser. Within that function, we use the ‘setItem’ of the local storage object to save our data. the ‘setItem’ function takes two parameters, a key and a value, the key is used to identify and differentiate unique values in the store and the value parameter will be the actual value that is saved in the browser cache. For the value, we use the ‘JSON.stringify’ function to convert our data object into a JSON string that can be saved in the local storage.

We now need to add code to retrieve the data from the local storage, if any exists. In the code snippet below I have changed the assignment value of the ‘data’ object to either be the stored data or if there is no stored data, an empty array. This line of code first tries to retrieve whatever is stored under the key ‘data’ in the local storage, this will return our JSON string, so we then need to parse that string to convert it back into a JavaScript object. If that object is undefined, meaning there is no data saved in the local storage, then we set the data to an empty array. This means initially the list will be empty but if we add a few items and refresh the page those items will be saved and retrieved from the local storage of the browser.

In this part, we added back the ability to add new items and to save and retrieve our list items from the browser cache. However, this is browser dependent. This means that if you open this webpage up in one browser and add a few items and then open the page in a different browser those items won’t be saved, as each browser has their own independent cache. We will eventually save the items into a database which will mean it can be used from any browser and any computer and the items will all be the same.

Further Reading

JavaScript Map Function Explained
What is Defensive Coding?
What is JSON? 
JavaScript Local and Session Storage
JavaScript OR Assignment Operator

Remember all of the code for this tutorial series can be seen at the following link: https://github.com/acroynon/tutorial-to-do-list-app
and a demo of the to-do list application can be seen at the following link: https://acroynon.github.io/tutorial-to-do-list-app/

Continue to Part 7

Leave a Reply