Among the exciting new features in HTML5, client-side storage and databases stand out. These features can be particularly useful due to their ability to persist much more data on a client's browser than previously possible. Specific new capabilities include local storage, session storage, and WebSQL and IndexedDB client-side databases. In this post, I will focus on the latter two specifications.

WebSQL is an API that allows developers to leverage their existing knowledge of SQL syntax to create client-side databases. There are also ORM JavaScript plugins available to use with WebSQL. These simplify the syntax, abstract the data, and can provide asynchronous capabilities (a la persistence.js) [1]. The advantages of WebSQL are great in that you get the ability to create a client-side database using the well-known SQL syntax and you can store a good deal of information. In fact, the lowest size limit is 5MB on the Chrome browser [2]. There are synchronous and asynchronous WebSQL API's as well. However, one glaring problem with WebSQL is that it is no longer supported by the W3C [3]; fortunately, WebKit browsers still offer support [4]. Does this leave developers without a client-side database solution? Definitely not.

The emerging client-side database standard is IndexedDB. While much the same can be accomplished with IndexedDB as in WebSQL, there are some definite differences. IndexedDB is not a traditional database; it is an asynchronous object-store. There exists a synchronous API for IndexedDB but it is likely to be deprecated [5]. IndexedDB uses pure JavaScript (no need to embed the syntax of another language such as SQL) and creates an object-store rather than a traditional database. This is more aligned with the web and more specifically JavaScript though as everything in JavaScript is an object. Its asynchronous nature is something to get used to as well. It takes more thought to put together than simple synchronous function calls as you have to leverage the use of callbacks.

Let's look at some examples with each API to better illustrate some differences.

In WebSQL, to open a database we would call the openDatabase() function. This function takes the following parameters:

  1. Database name
  2. Database version
  3. Database description
  4. Database size (in bytes)
  5. Database creation callback

var newDB = openDatabase('db_name', '1.0', 'db description', 5 * 1024 * 1024, function() { alert("Creation callback"); });

After the callback is executed, your database is open.

Things are a little different with IndexedDB. Everything you do with this is a "request." You request to open a database, request to create an object store, request to add or remove objects, etc. When these requests are complete, they execute the callbacks you provide. In the example below we request to create a new database by calling the IndexedDB.open() function. If the request succeeds, our onsuccess() callback is executed. If it fails the onerror() callback will be executed.

All that is required to open the database is a description. Similar to above, IndexedDB uses callbacks to determine when the creation/failure occurs.

var newDB; var newRequest = indexedDB.open("test database"); newRequest.onerror = function(e) { alert("This request failed :("); }; newRequest.onsuccess = function(e) { newDB = newRequest.result; };

TL;DR

In my experience, IndexedDB performs much faster than WebSQL. Recently I wrote a solution for a mobile-web training assignment where we were required to create an 11MB client-side database with ~80k entries. Using an ORM to wrap WebSQL, it would've taken over an hour to create the database. IndexedDB performed the equivalent task in less than two minutes. I think that's enough said.

After some use the IndexedDB API becomes very easy to use. You start to think asynchronously which takes some of the difficulty out of using IndexedDB.

In my opinion, IndexedDB may still be maturing but it is a very valuable asset to understand. WebSQL may still be supported on WebKit browsers but since it has been deprecated it's time to look towards the future that is IndexedDB.


[1] http://karwin.blogspot.com/2009/01/why-should-you-use-orm.html

[2] http://html5doctor.com/introducing-web-sql-databases/

[3] http://www.w3.org/TR/webdatabase/

[4] http://html5doctor.com/introducing-web-sql-databases/

[5] http://www.w3.org/TR/IndexedDB/#sync-database