Over a million developers have joined DZone.

Guide: From WebSQL to IndexedDB

DZone's Guide to

Guide: From WebSQL to IndexedDB

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}