Mobile applications: client storage and offline execution - HTML5 in Action - page 192

Listing 5.8. app.js—Connecting the UI to the localStorage functions
Try it out!
If you now launch the application in a compatible browser, you should be able to navigate
to the Settings view and change the name and color scheme from the default settings. Fig-
ure 5.3 shows this happening on a BlackBerry Torch 9860 smartphone.
Figure 5.3. The user fills out the Settings form and presses the Save Settings button. When the data has been saved
to localStorage , the settings are reloaded, and a message is displayed to the user. When the user dismisses this
message, they are taken back to the Task List view (which is empty for now).
If you were to press the Reset All Data button, the application would return to its default
color and name.
Because you're using localStorage , these name and color settings will persist between
browser sessions (unless the user specifically clears down their localStorage area via
the browser preferences screen). Try refreshing the page, restarting your browser, and even
restarting your computer; the data should persist. Pretty neat.
In the next section, we'll show you how to take things even further with client-side data
storage using the IndexedDB API. We'll do so by having you add real meat to your sample
application by implementing the ability to add, edit, delete, view, and search tasks.