"Full" sample of IndexedDB in action

After a bit more sweat and tears, I've now got a "full" (if ugly) example of an IndexedDB application. It allows you to create and delete simple notes. You can view this demo here:

http://www.raymondcamden.com/demos/2012/apr/30/test5.html

Right now this demo is Firefox only. It doesn't work in Chrome because of the bug I mentioned in my earlier blog post. Here's the code - and again - I want to mention (and credit) the excellent MDN tutorial for making this easier to build.

Nothing too scary, right? Using method chaining makes the code a bit more palatable and simpler to work with.

After getting this working, I began to look at how you can retrieve data. I guess I shouldn't be surprised (and @thefalken pointed it out to me), but you are limited to primary key lookups only.

So let me make sure that is clear. This is not a replacement for WebSQL. You cannot search. I guess - technically - you could search if you load everything up and iterate over it, but that's not really efficient. You can do range based filters, so for example, given a set of names I could go from Bob to Mary, but if I wanted to quickly find all the objects with property X set to Y and property Z set to A, then I'm out of luck. I was really thinking this was a Mongo-ish type solution, but I was wrong.

I don't know about you - but this is kind of disappointing. Maybe my opinion will change, but right now I'm sad that WebSQL is being dumped for this.

Archived Comments

Comment 1 by Terry Collinson posted on 5/2/2012 at 9:53 AM

I am using PhoneGap and WebSQL at the moment. Just got your synchronisation working by the way. Will I have to dump WebSQL and use IndexedDB? Search is essential in my applications.

Comment 2 by Raymond Camden posted on 5/2/2012 at 3:29 PM

WebSQL works in mobile just fine (not just Mobile/PhoneGap, but the browsers themselves). So I'd continue to use it for now. Just be aware of it being deprecated in general.

As it stands - even if it goes away 100%, you can use SQLite via a PhoneGap plugin to continue using it.

Comment 3 by atomxml.org posted on 7/15/2013 at 7:49 AM

Hello,

Google Chrome:

var transaction = db.transaction(["note"], IDBTransaction.READ);
Change:
var transaction = db.transaction(["note"], 'readwrite');

var request = db.transaction(["note"], IDBTransaction.READ_WRITE)
Change:
var request = db.transaction(["note"], 'readwrite')

var request = db.transaction(["note"], IDBTransaction.READ_WRITE)
Change:
var request = db.transaction(["note"], 'readwrite')

Thank you. :)

Comment 4 by Raymond Camden posted on 7/17/2013 at 6:05 AM

No, thank you. :) I haven't gotten around to updating my Chrome IndexedDB articles. They were written at a time when Chrome wasn't fully to spec.

Comment 5 by Jayesh posted on 2/20/2014 at 10:27 PM

Excellent sample application. However, how to get count of the data store?

Comment 6 by Raymond Camden posted on 2/21/2014 at 3:00 AM

You can get a count pretty easy - see my "Counting Data" section in this article:

http://code.tutsplus.com/tu...