Saving the Month

The last step: the app has to remember the month. Now, one click on Run, or one reload of the page, and every expense is gone.

The task. Save the expenses in localStorage under the key expenses every time the list changes, and when the app starts, read them back, so that the list and all the totals show them again. Then add a button with the id new-month and the text New month under the totals: a click on it empties the list for the start of a new month, and the empty list stays saved too.

A tip: one watcher can save after every change, whatever made it. push() changes the array inside, so the watcher needs { deep: true }. Put the button outside the form: a button inside a form sends it.

That's the whole project. Your app checks what's typed into a form, keeps a list, adds it up three ways with computed values that are always up to date, and remembers the month in the browser with one watcher. In the next lesson, Components, you'll learn to split an app like this one into smaller parts, each in a file of its own.