Persistence with Local Storage
We will keep track of the state in our Pomodoro app by storing it locally.
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:
Level up your interview prep. Join Educative to access 80+ hands-on prep courses.