Creating an to-do app is usually the first application you learn how to build in JavaScript but the problem with all those apps is that when you reload the page all those to-do’s are gone.

There is a simple solution though, and that’s to use local storage. The good thing about local storage is that you can save those bits of data to the user’s computer so that when they reload the page all of their todo’s will still be there and local storage is actually quite simple when it comes to saving the data and making it available on the page.

What is local storage?

Local storage is a part of web storage, which itself is part of the HTML5 specification. There are two options for storing data in the specification:

• Local Storage: stores data with no expiration date and this is the one we will be using because we want our to-do’s to stay on the page for as long as possible.
• Session Storage: only saves the data for one session so if the user closes the tab and reopens it all their data will be gone.

In simple terms, all that web storage does is store named key/value pairs locally and unlike cookies this data persists even if you close your browser or turn off your computer.

The HTML

If we think about a to-do list what we will need is :

• An input to place our to-do.
• An input button to add our to-do.
• A button to clear all the to-do’s.
• A placeholder unordered list where our to-do’s will be placed in list items.
• And finally we need a placeholder div to show an alert when you try to enter an empty to do.

So our HTML should look something like this: