Finley, I am.

Of Javascript and Databases.

HTML5 is the new buzz word around the Web. What it entitles for us frontend developers is massive. The level of stuff that is being added is set to truly bring web apps to the forefront, and Javascript will continue to be a strongly requested technology. The biggest part of the spec that I have played with is the local databases. And, though flaws are present (in spec and in supporting browsers), it is definitely where we need to be headed.

Some have questioned the true usefulness of Javascript databases, as they, like cookies, just store data from session to session. But, the uses are aplenty when you consider the matching of the offline functionalities of HTML5, such as the cache manifest. Combined together, one can make an app that stores data locally, which may periodically synchronize with a server when Internet is available, and works offline. What use is this? Imagine your Facebook contacts (phone numbers, street addresses, email addresses, etc.) being available offline. Or being able to access email from a webmail interface, but while offline. These things are possible, now, through Gears and other plugins that allow offline caching and storing of data, but with Safari 3+, the HTML5 methods are available without plugins.

Who is using this technology? Gmail, for one. If you visit your Gmail account from your iPhone, iPod touch, Palm Pre, or Android phone, you'll notice (or maybe not notice) this technology in use. Gmail downloads a database of your messages to your mobile device, and uses a cache manifest to store the interface files (HTML, Javascript, CSS, etc.) This allows you to easily access you email with the Gmail interface online and offline. Send an email while your offline? No problem, it'll send as soon as it has a connection available!

Want to use this technology? You can find guides on Apple's Safari Developer site. But, for those of you who don't know much when it comes to SQL, it may be a new language that you'll need to learn to utilize this new technology. That is why I have (attempted) to make it much easier to use, by implementing a system much like the "Active Record" of Code Igniter. If you don't know how to use that, don't worry, I've got a small guide on how to use my script, which is written as a plugin for jQuery. Let me give you a quick example of connecting to a database, creating a table, and inserting data into that table.

//connect to database
$.db.open_db({
    shortName: 'prayers',
    version:   '1.0',
    name:      'Prayers',
    maxSize:   1048576 //allow up to 1 mb to be stored
});

//create a table, named "prayers," and store a prayer in it once created
$.db.create_table({
    name: 'prayers',
    fields: [{
        name: 'id',
        type: 'INTEGER',
        extra:'PRIMARY KEY AUTOINCREMENT'
    }, {
        name: 'prayer'
    }, {
        name: 'date',
        type: 'INTEGER'
    }]
}, true, function () {
    $.db.insert('prayers', {id: null, prayer: 'For my fiancée\'s upcoming test.', date: (new Date()).getTime()});
});

So what does what? $.db.open_db opens a connection to the database, and if it doesn't already exist, it creates it. $.db.create_table creates a table with the name and fields specified. The second argument (true in this example) is an if exists clause; if the table already exists, don't create it again. The third argument is a callback upon successful creation of the table. Here we, as the callback, insert a prayer into the prayers table we just created.

This is far easier, at least in my opinion, than running raw queries all the time. Further, more advanced examples are available on the project page here. The biggest shortcake to Javascript databases, that I've come across, is that they are asynchronous. Why, if the data is stored locally, would accessing the data be asynchronous? Maybe someone of better knowledge on this subject could enlighten me? Until next time, please experiment with this script, and look forward to the future!