Over a million developers have joined DZone.

Easier IndexedDB with IDBWrapper

DZone's Guide to

Easier IndexedDB with IDBWrapper

· Web Dev Zone
Free Resource

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

If you're excited about IndexedDB but don't want to learn all its intricacies on your own, and don't want to wait for tutorials to walk you through every step slowly, then you might enjoy this wrapper for IndexedDB, just released by Jens Arps.

IDBWrapper has two purposes, says Jens:

a) ease the use of indexedDB and abstract away the differences between the existing impls in Chrome and Firefox (yes, it works in both), and

b) show how IDB works. The code is split up into short methods, so that it's easy to see what happens in what method.

The wrapper makes IndexedDB work a little more intuitively, which accomplishes both purposes.

For example, here's how IDBWrapper defines a put() function:

	put: function(dataObj, onSuccess, onError){
// TODO: Check for missing keyPath property.
onError || (onError = function(error) { console.error('Could not write data.', error); });
onSuccess || (onSuccess = noop);
if(typeof dataObj[this.keyPath] == 'undefined' && !this.features.hasAutoIncrement){
dataObj[this.keyPath] = this._getUID();
var putTransaction = this.db.transaction([this.storeName], this.consts.READ_WRITE, 1000);
var putRequest = putTransaction.objectStore(this.storeName).put(dataObj);
putRequest.onsuccess = function(event){ onSuccess(event.target.result); };
putRequest.onerror = onError;

For me, at least, this helps translate existing JavaScript intuitions to the new features of IndexedDB. (I personally prefer jumping in like this, albeit with translation, rather than stepping through a linear tutorial.)

The rest of the code is similar, and worth reading for self-educational purposes, even if you don't actually download and use it.

Check it out on github here.

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.


Dev Resources & Solutions Straight to Your Inbox

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 }}