Pete Freitag Pete Freitag

HTML5 SQL DB vs localStorage

Published on January 25, 2011
By Pete Freitag
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.



html5 javascript localstorage database sql

HTML5 SQL DB vs localStorage was first published on January 25, 2011.

If you like reading about html5, javascript, localstorage, database, or sql then you might also like:

Discuss / Follow me on Twitter ↯

Comments

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.
by Wytze on 08/15/2012 at 9:23:47 AM UTC
You're using openDatabaseSync without using workers. Is that permissible?
by Phillip Senn on 03/12/2013 at 2:24:17 AM UTC