Over a million developers have joined DZone.

Guide: From WebSQL to IndexedDB

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

RDBMSers love their ACID and SQL, but the rapidly-growing world of in-browser databases can't afford, and usually doesn't need, that kind of pristine simplicity.

For web applications, even database-centered applications, performance and ease of use -- and, most of all, native comfort with JavaScript -- are far more important. Browsers are platforms, but still not whole machines. Scaling down a SQL-queryable database, as the old WebSQL standard did, is not the optimal solution.

IndexedDB is, says W3C; but because its intended audience is composed of web developers, not (chiefly) database developers, IndexedDB coding feels a lot more like DOM work than hard-core database development.

This tutorial from html5rocks.com is written to ease the database-to-webapp transition.

  • You'll see the WebSQL process first, for most basic CRUD-type processes -- most of the meat here is in the SQL itself.
  • Then you'll be see the IndexedDB equivalent, right below -- which will immediately look more familiar to the JavaScript (or other OO) developer, and incidentally perhaps a bit friendlier to the NoSQLer as well.

The top of the guide also provides a helpful side-by-side (columnar) comparison of WebSQL and IndexedDB, offering a more bird's-eye and standards-centric view than the code samples that make up the bulk of the article.

Definitely worth reading/bookmarking, if your web app needs to run a database in browser.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}