HTML5 SQL DB vs localStorage

databasesweb

I've now built some mobile applications using both HTML5's localStorage and the HTML5 Embedded SQLite Database (aka Web SQL Database).

For my most recent mobile app: Mileage Pad I choose localStorage, and here's why:

What is localStorage?

The localStorage API is pretty easy to work with. It is a simple key / value storage that is persisted from one request to another (unless the client flushes it).

How do you use localStorage in JavaScript?

Here's a simple example:

localStorage.setItem('key', 'value');
alert(localStorage.getItem('key'));

Couldn't be much easier to use, but if you want to store something more complicated than a string, such as an object, you need to serialize it or JSONify it.

What is HTML5 Web SQL Database?

Currently implemented in Webkit browsers (which makes it good for use on mobile devices that run on webkit). It is essentially an embedded SQLite database. You can create a database, tables, and then run SQL on it.

How do you use HTML5 Web SQL Databases in JavaScript?

Here's a quick example:

try {
    if (window.openDatabase) {
        db = openDatabaseSync("HelloCFUG", "1.0", "HelloCFUG", 200000);
        if (!db)
            alert("Failed to open the database on disk. Possibly full.");
	    db.transaction(function(tx) {
	        tx.executeSql("SELECT COUNT(*) FROM HelloCFUG", [], nullDataHandler, function(tx, error) {
	            tx.executeSql("CREATE TABLE HelloCFUG (name TEXT, email TEXT);", [], nullDataHandler, dbErrorHandler);
	        });
			tx.executeSql("SELECT * FROM HelloCFUG", [], function(transaction, results) {
				for (var i=0; i

As you can see a bit more involved but you also have the power of SQL at your hands.

Comparing localStorage and HTML5 Web SQL Databases

localStorage Pro's

  • Very easy to use and memorize the api.
  • Synchronous API - no need for writing a callback just to get your data
  • Supported on more browsers

localStorage Con's

  • Objects must be serialized (would be nice if they did this for you!), potential performance impact of JSON serialization / deserialization.
  • Not nearly as powerful as SQL, which can sort, search and aggregate data much easier.

Web SQL Database API Pro's

  • SQL Is great for data mining, searching, sorting, and aggregating.
  • The Asynchronous API will probably perform better (depends on the app though)
  • Won't work on all browsers, for example Blackberry OS 5 (BB OS 6 uses WebKit so it works find there, but BB5 still has a large market share as of this writing).

Web SQL Database API Con's

  • Requires a lot of boilerplate code to do simple things
  • The W3 documents a synchronous API (openDatabaseSync), but it does not appear to be implemented in Safari or Chrome (except within a web worker from what I have read). While the asynchronous access worked well most of the time, it did get tricky when I had to nest a bunch of asynchronous code, it created a confusing mess of callbacks.
  • The IndexedDB API appears to be favored by browsers that have not supported Web SQL Database (FireFox, IE) it is unclear which will be standard to me at this point.

I'm sure all the pro's and con's are highly debatable, and also depend quite a bit on the requirements of the app you are building. So play around with each and then decide which is best for your project.



Related Entries

2 people found this page useful, what do you think?

Trackbacks

Trackback Address: 780/61CB889DBDC75F9C58DBCCB0F87EF8DE

Comments

On 03/06/2012 at 6:23:54 AM UTC Nick Lachey wrote:
1
Fantastic post. Here’s a tool that lets you build your database apps in the cloud fast and without coding. It integrates with a secured DataHub to automate movement of data between your online database and other systems http://www.caspio.com/extend/platform-extensions/datahub.aspx

On 08/15/2012 at 9:23:47 AM UTC Wytze wrote:
2
Thanks for the comparison Pete! In my experience, another con of localdb is that it is very slow. Simple SELECT, UPDATE and DELETE statements in tiny tables with very few records still take seconds.

On 03/12/2013 at 2:24:17 AM UTC Phillip Senn wrote:
3
You're using openDatabaseSync without using workers. Is that permissible?

Post a Comment




  



Spell Checker by Foundeo

Recent Entries



foundeo


did you hack my cf?