I won’t go into all the details, but I setup a very simple demo page here: http://radikalfx.com/files/db.html. Visit that link with your iPhone or with Safari 4 to see how it works. The page lets you creating and dropping a table in your client side browser database. And you can insert, select and delete data in this table.

So how does it work
The first thing to do, is create a connection to the database. This can be done with some code like this:

function setupDatabase() {
  try {
    if (window.openDatabase) {
      var shortName = "testdb";
      var version = "1.0";
      var displayName = "Test Database";
      var maxSize = 65536;
      mydb = openDatabase(shortName, version, displayName, maxSize);
      dbReady = mydb != null;
    } else {
      writeStatus("No JavaScript database support!");
    }
  } catch(e) {
    dbReady = false;
    writeStatus("Exception while setting up database: " + e.message);
  }
}

The most important call in this code is the mydb = openDatabase(shortName, version, displayName, maxSize); which opens the database connection for you.

After this is done you can start transactions on this database in the following way:

mydb.transaction( function (transaction) {
  transaction.executeSql(query, data, dataHandler, errorHandler);
});

The transaction requires a query, the data added to the query. And a data handler object which is called when the transaction succeeded and a error handler for handling errors in the transaction.

For inserting data I created the following very basic data handler in my sample code:

function insertDataHandler(transaction, results) {
  writeStatus("Insert row with id: " + results.insertId);
}

Since this functionality is build with SQLite, you can use the documentation of SQLite to figure out what you can do with your queries and how they should be build up.

Since the application I am developing is just for the iPhone, I can safely use this functionality. Of course for normal web development it’s kinda tricky since most browsers don’t support it yet.

For more information on this technology you can also visit the Safari Programming Guide.