Loading the list

To load the list we need to create a second function. Whenever the loadList function is called, it will set the innerHTML of the < div > with the id “list“ to whatever has been saved in localStorage.

We need to call our loadList function so that when our browser finishes loading, it loads our list too.

To make sure we don’t try to load a list that hasn’t been saved, we have to use an if statement before we try to use localStorage.

The if statement we need looks like this:

[javascript] <div id="list"></div>
<script>
if(localStorage.storedList) {
loadList();
}
</script>[/javascript]

The if statement checks if there is a list saved in localStorage before trying to load it.

When we save our complete code block and run our app in our browser, items we add to the list are now saved even if we close and then reopen our file.

Without this if statement our saved list won’t load.

Connected through code, Choose Your Platform!

About the Author: Bernard Aybout

In the land of bytes and bits, a father of three sits, With a heart for tech and coding kits, in IT he never quits. At Magna's door, he took his stance, in Canada's wide expanse, At Karmax Heavy Stamping - Cosma's dance, he gave his career a chance. With a passion deep for teaching code, to the young minds he showed, The path where digital seeds are sowed, in critical thinking mode. But alas, not all was bright and fair, at Magna's lair, oh despair, Harassment, intimidation, a chilling air, made the workplace hard to bear. Management's maze and morale's dip, made our hero's spirit flip, In a demoralizing grip, his well-being began to slip. So he bid adieu to Magna's scene, from the division not so serene, Yet in tech, his interest keen, continues to inspire and convene.