No more cookies, client side database on the iPhone

At the moment I am working on a small iPhone web application. The main goal of creating this application is to check out the capabilities of my favorite phone. While working on this demo application, I wanted to store favorite information for every user. Since I don’t want to set up server side databases for just a small test web application. My first thought was the always hated cookie. But before doing that I wanted to look into the possibilities of the HTML5 database support. I knew that this was implemented in the latest Safari release. But didn’t know if it was in Safari on the iPhone. But you know what, it is!

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.

This entry was posted on Sunday, March 15th, 2009 and is filed under Client side database, HTML5, JavaScript, iPhone. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.