Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Easier IndexedDB with IDBWrapper

DZone's Guide to

Easier IndexedDB with IDBWrapper

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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.

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

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.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}