Building Android Apps with HTML, CSS, and JavaScript, 2nd Edition

Web SQL Database

Of all the exciting features of HTML5, the one that rocks my world the most is the Web SQL Database. The Web SQL Database spec gives developers a simple but powerful JavaScript database API to store persistent data in a local SQLite database.

Note

Technically, the Web SQL Database spec is not part of HTML5. It was broken out of the original HTML5 spec into its own spec, but in casual conversation, it’s often still referred to as an “HTML5 feature.”

Developers can use standard SQL statements to create tables and to insert, update, select, and delete rows. The JavaScript database API even supports transactions. We’re talking about SQL here, so there is an inherent complexity. Regardless, this is a game-changing feature, so you will be well rewarded if you spend time getting your head around it.

Creating a Database

Now that our Date panel knows which date the user has selected, we have all the information we need to allow the user to create entries. Before we can write the createEntry() function, we need to set up a database table to store the submitted data (this is a one-time operation). We’ll add some lines to kilo.js to do so:

var db; $(document).ready(function(){ $('#settings form').submit(saveSettings); $('#settings').bind('pageAnimationStart', loadSettings); $('#dates li a').bind('click touchend', function(){ var dayOffset = this.id; var date = new Date(); date.setDate(date.getDate() ...