Tip 28
Storing Data in a Client-Side Database Using IndexedDB
The localStorage and sessionStorage methods give us an easy way to store simple
name/value pairs on the client’s computer, but sometimes we need more
than that. The HTML5 specification initially introduced the ability to store
data in relational databases. The storage part has since been spun off into a
separate specification called Web SQL Database.^4If you have even a basic background in writing SQL statements, you’ll feel
right at home in no time. Unfortunately, that specification is all but abandoned
in favor of IndexedDB, an object database that is incredibly powerful, though
a little more complex to use. Let’s explore IndexedDB as we build a simple
client-side web application. Before we begin, you should know that this tip
involves writing a lot of JavaScript code and is a bit lengthy, but the ability
to create a flexible way to store data on the client machine is worth the effort.AwesomeCo wants to equip its sales team with a simple application to collect
notes while on the road. This application will need to let users create new
notes, as well as update and delete existing ones.The Notes Interface
The interface for the notes application consists of a left sidebar that will have
a list of the notes already taken, and a form on the right side with a title field
and a larger text area for a new note. Look at the following figure to see what
we’re building.Figure 31—Our notes application
Chapter 9. Saving Data on the Client • 190
Download from Wow! eBook <www.wowebook.com> report erratum • discuss