This was probably the most difficult decision I've ever had to make as far as mobile development goes, do I go with Web SQL or Indexed DB? One of my latest projects demands a little more sophisticated data storage than that offered by localStorage or sessionStorage.
I started researching both options, and it didn't take long to become shocked at the lack of support for either option. Safari will support Web SQL, but not IndexedDB. IE hopes to support IndexedDB, but has passed on the Web SQL support. Chrome, seems to support them both. What makes this decision even heavier is the fact that we're not just talking about gracefully degrading to a squared-off corner if border-radius isn't available. This will likely be a huge component of any given web app that leverages it.
The need for a client-side data storage solution was so important, that actually had to pick and choose which browsers could use the app, and which couldn't. I started leaning towards Web SQL, after all, iPhone and Android will do just fine. The bad news is, W3C is no longer maintainhttp://www.w3.org/TR/webdatabase/ing the specification for Web SQL. It has, in effect, been cancelled before it had a chance to fly.
I love the fact that I'm able to use my existing knowledge of SQL, modified ever so slightly. But, a fact is a fact, this is going away in the future. So, my advice to anyone who decides to take the Web SQL road as I have is this:
Abstraction. Encapsulate your database methods in a separate JavaScript file and provide the setter and getter methods and functions to retrieve the data from the database, keeping the details hidden from the rest of your app. In this way, you'll be able to quickly modify your database JavaScript file, it's methods and functions when Web SQL is no longer supported.
Example db.js file to create a database and tables:
var database = { 'name' : 'test', 'version' : '1.0', 'displayName' : 'Test', 'maxSize' : 32768 }
var db = openDatabase(database.name, database.version, database.displayName, database.maxSize);
var sql = '';
db.transaction(function(transaction) {
sql = 'CREATE TABLE IF NOT EXISTS test_table (';
sql += ' test_id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ';
sql += ' test_type VARCHAR NOT NULL, test_name VARCHAR NULL);';
transaction.executeSql(sql);
sql = 'CREATE TABLE IF NOT EXISTS test2_table (';
sql += ' test2_id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ';
sql += ' test2_name VARCHAR NOT NULL);';
transaction.executeSql(sql);
},
function(error) {
alert('Trouble creating database, please contact ' + supportEmail + ' for assistance. Error: ' + error.message);
}
);
Keeping in mind that this separate db.js file can be modified to accomodate for IndexedDB database creation methods when the time comes.