Optimizing: Get specific Value(and not more) from IndexedDB

Question

What I am doing is saving and retrieving lot of Images on the client.

(Now indexedDB seemed to be overkill for this simple job, but since it was the only Cross-Browser solution with no limit(like localStorage), I had to use it ... and it works)

This is what my db looks like: (more specific, the only objectstore of my db)

# | key(timeID) | value

0 | 812378123 | {data:¨....¨, tnData:¨...¨, timeID:812378123}

1 | 912378123 | {data:¨....¨, tnData:¨...¨, timeID:912378123}

2 ....

KeyValue is a unique TimeID, Data contains the Image as text and tnData contains the thumbnail of this Image as text (when canvas.toBlob() is ready I will switch to that)

To retrieve a Image I just use store.get(id)

Now all of that works.

But now I just want to load the Thumbnail(¨tnData¨) - but NOT the real Image (¨data¨ which can be quite big).

So I hope there is something like store.get(id, ¨tnData¨) ...

But I did not found it, so far. Does anyone know of a easy way of doing this, without having to rework my db?

Thanks in advance ... and sorry if I am not in the right place or have broken some other rule ... first question for me ;)

Answer 1

Does anyone know of a easy way of doing this, without having to rework my db?

No, IndexedDB doesn't let you return only part of an object.

Although reworking your db might not be too hard. You could break it into two object stores, one for thumbnails and one for whole images. Then you can query for specifically the one you want.

If you're often getting both at the same time, you'll have to do some benchmarking and see if it actually is faster to break them up, or maybe it could even make sense to duplicate thumbnails (one object store like you have now, and one with just thumbnails).