The HTML5 brought to us a lot of new resources that have revolutionized the development of web applications (as was said before in this blog 1 e 2). Today I’ll speak about a new resource of HTML5 that solved an ancient need and that had no proper solution, the local data storage.

We can understand “local data storage” as a persistent way to storage data on client-side that might be, or not, sent to server. Can you imagine the potential of this resource? Your application won’t need to stop working when the user lost his internet connection. A good example is the offline Gmail, a Google Chrome app. This app let the Gmail users read and answer theirs e-mails without internet connection.

To have this functionality some developers have used a resource that wasn’t designed to do this, the Cookie. In fact it can be used to make a local data storage, but this is not an efficient way as the Cookie can only store a limited amount of data. Instead of this HTML5 offers an browser native API, called Web Storage.

Web Storage

Also known as HTML5 Storage the Web Storage is a data store made by key / value. It’s a simple idea: relate the stored data to values that can be used to retrieve those data. Because of that simplicity this way of store data became popular and was implemented in almost every browser, as shown by Pic 1 that show the browse versions that support the Web Storage.

The Web Storage can only store string values, because of that is necessary that the developer deserialize the value to other data structures. In other words, to store an integer value is necessary to convert the value to string before store the data. Another limitation is that the Web Storage can only store 5MBs of data.

With those limitations the Web Storage wasn’t a definitive solution and soon another solution was presented to us, the Web SQL database

Web SQL Database

By the name you can imagine what are the features of this database, right? The Web SQL is a relational database structured SQL. So, with this database we can build tables an relate them,  beyond that you can execute SQL commands to access the stored data, as the example shows: 

var db = openDatabase('mydb', '1.0', 'my first database', 2 * 1024 * 1024);
db.transaction(function (tx){
 tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
 tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")');
});

The specification of the Web SQL has two features that should be mentioned.  The first one is that, different from the Web Storage, it has no size restriction, with that the developer can set the size at the moment of the database creation and rests with the browser the job to accept or decline the size of the database. The second one is that the API is natively asynchronous, in other words, the application doesn’t have to wait for the requests to the server to be complete as it is needed on synchronous applications. To accomplish that the Web SQL operations have a callback function that determines in which point the application will receive the response from the database and process it.

However, the W3C announced in 2010 that the Web SQL database is an outdated specification. And exists a recommendation to the developers not to use this technology. Don’t Worry, no needs to despair. The webkit based browsers still and probably will maintain the support to WebSQL. The new API presented by W3C is the indexedDB, that I’ll show you next.

Indexed Database

The IndexedDB is an API with characteristics from a NoSQL database. In other words differently from the WebSQL that stores the data into tables and is relational, the IndexedDB is not relational and stores the data directly as objects.  In addition of being asynchronous this API is transactional, the commands are executed through transactions. To every transaction it should define the type: read only, write only, read and write.

The indexedDB utilizes a value or a set of values as index from the stored objects, like a key / value approach, with that it’s possible to optimize the searches. The IndexedDB is present on every browser on theirs newest versions, because it is a new API. You can check at Pic. 1

Which one should I use?

Analyzing both API’s it’s difficult to compare them and choose the best one, to application that already uses a relational database model the WebSQL is the right choice to do, otherwise the IndexedDB is the best choice, because is the most updated one and recognized by W3C, not to mention the vantages of a NoSQL database. Therefore, the decision of which offline database to use depends a lot of the context of your application.

To make easy the database choice and the application development the Crux framework has a unique implementation for both types of databases. The Crux supports the database creation with an unique abstract model. The same code could map a database IndexedDB or WebSQL. For a browser that supports one or the other,  Crux will use the available one, in the case of a browser the uses both the Crux’s choice is the IndexedDB.

The local data storage allows a range of possibilities e we can evolve even more the web applications. As we saw, there are a lot of efficient solutions that can facilitate the development. From now on you have the knowledge to get deeper in each one of those technologies, below here there are some links that can be useful to clarify more about this theme.

Good Reading!

Useful Links

http://www.html5rocks.com/pt/features/storage

http://diveintohtml5.com.br/storage.html
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
http://www.w3.org/TR/IndexedDB/
http://www.html5rocks.com/en/tutorials/webdatabase/websql-indexeddb/?redirect_from_locale=pt
http://www.w3.org/TR/webdatabase/