Persistence with Local Storage

Exercise:

Store the state of the application in local storage. Make sure the application state is reloaded once you refresh the page.

Source code:

Use the PomodoroTracker2 folder as a starting point. The end result is in PomodoroTracker3.

Solution:

Clone PomodoroTracker2 from my GitHub repository as a starting point. Alternatively, you can use your own solution too. We will only modify the JavaScript code, js/pomodoro.js.

Local storage is straightforward. There is a localStorage variable in the global scope. localStorage may contain keys with string values that persist in your browser. This is client-side persistence, so your changes do not carry over to a different browser or computer.

As you can only use strings as values in the local storage, you have to stringify your object or array using JSON.stringify.

Let’s write a function to save the application state to the local storage: