JavaScript 30 — Day 15 — Local Storage and Event Delegation

Steven Chen
2 min readDec 16, 2021

--

You can tell I was craving tacos when I wrote this

This was a great exercise and code along that essentially mimics a To Do list.

Local Storage is a useful tool for small apps using client side storage for persistence of data rather than having to set up a database or know any back end.

What all that means is that the user can make changes to the page, refresh or close, come back and the information will still be as they left it.

Using local storage is actually very easy if you’ve never done it before. It has some pretty intuitive syntax. Examples:

localStorage.setItem('itemName', 'Hello');
localStorage.getItem('itemName');
delete localStorage.itemName;

Something that is really important that also comes up in this exercise is Event Delegation.

Since the list items are being generated dynamically, adding event listeners to each one at page load will do us no good.

So we would have to grab a parent container that is present on page load and add an event listener to that element. We can then use the event to filter to whatever functionality suits our needs.

I’d definitely check out more in-depth articles below about storage options and Event Delegation.

At the end of the exercise, Wes challenges you to add a few more buttons to delete, check, or uncheck all the checkboxes for the list items, which at this point in the code-along will be simple enough for you with what you have just learned.

--

--