If you want to dive in mobile website and you are a good jQuery developer, you will love jQTouch. It’s one of the best mobile web framework out there.

However, one thing I found it was missing, was some database api. In webkit you now have access to one database per website address. Think of it as a better cookie. You could for example easily create a To do list with this feature.

Webkit is touchy about its database

You don’t mess with the webkit database, if you do, there is a good chance it will crash. Building this script, I never saw so much crash in Safari! so be careful using it. This script creates an abstraction of the webkit database api, it will enable you to write faster and less bloated code. It makes it really easy to play with the database, look at the demo, the HTML5 database section is all loaded from the webkit database.

View demo
(The Demo works only on Safari and webkit devices)

It can really be beneficial performance wise to use the database as a cache, this loads a lot faster than ajax web page, but you need to be careful on how much information you load from it. The iPhone is not a power house, you will need to find a balance. Also, used with the offline mode, you can really create powerful app that can be used offline.

Update: Apple is also doing database cache with the iPhone web user guide, interestingly enough they cache 1.4mb, the entire guide in the database in one shot. I personally did not see great performance when adding thousands of rows in the database, I am currently looking at how the pastry kit deal with the database executions. A good solution would be to create the database on the web application loading screen(when the application is added at the home screen).

How to use it

In fact what you see in the demo runs with basically 7 lines of code. Here a typical use of the extension:

The API

Open database

jQT.dbOpen(“name”, “version”,”descriptione”, size);
This function is needed on every page where you use the webkit database, be careful with version and size. Set a bigger size that you think you need, trying to add space later could prompt users permission. Example:
jQT.dbOpen(“databaseTest”, “1.0″,”jqTouch web application database”, 200000);

Create Tables

jQT.dbCreateTables(json)
You would use this typically to create the basic structure of your database, I would store it in another file called dbstructure.js, or something like this, a quick reference to go to when you need to change something in the structure. It can also be used to simply add a table at a selected time.
An example of the json structure to follow:

Create Rows

jQT.dbInsertRows(json)
You would use this typically to add rows in your table.
An example of the json structure to follow:

Delete table

jQT.dbDropTable(“table”)
Delete a table with all its information

Basic Delete Row

jQT.dbDeleteRow(“table”,”key”,”value”)
Delete a row following the statement WHERE KEY = VALUE. An example : jQT.dbDeleteRow(“listRecipe”,”id”,”‘5′”)

Get all the content from a table

jQT.dbSelectAll(“table”, callback(result))
Get all the information from a specific table. An Example:

Custom query

jQT.dbExecuteQuery(“Query”,”Debug text”, callback(result))
You can create your custom query and get a callback with the result. you will probably not need the debug text. Example:

Debug mode

I added a debug mode that you can enable in the extension, change the variable debugging to true. It will add an overlay and tell you about every query executed in the script.

Still in a early stage

I consider this release as beta v0.1. It works pretty well for what it does, but it’s not optimized and it’s not thoroughly tested, so be careful and have fun.

Download the source code View demo

Tested on:
Safari 4
Iphone webkit

Version 0.1 Online
December 22, Initial release