Taming IndexedDB [2/3]

Dani Vijay
Mar 6, 2018 · 2 min read

In last session, we setup a database and created an object store within. If you feel this strange, feel free to read Taming IndexedDB — Part 1. Else, lets get moving!

Working with Data

Read, write and delete operations can be performed using get, put and delete respectively. Makes sense, right?

As I mentioned before, get is used to read data from object stores. It should be used within a transaction. As this is for just reading data, a readonly transactions makes sense.

dbPromise.then(function(db) {
var tx = db.transaction('store', 'readonly');
var store = tx.objectStore('store');
return store.get('sandwich');
}).then(function(val) {
console.dir(val);
});

The code above returns data with primary key ‘sandwich’. What if we want to fetch everything out of an object store? getAll is here to rescue!

dbPromise.then(function(db) {
var tx = db.transaction('store', 'readonly');
var store = tx.objectStore('store');
return store.getAll();
}).then(function(items) {
console.log('Items by name:', items);
});

Updates and deletions can be performed in the same manner, but with put and delete, of course!!

// update using putdbPromise.then(function(db) {
var tx = db.transaction('store', 'readwrite');
var store = tx.objectStore('store');
var item = {
name: 'sandwich',
price: 99.99,
description: 'A very tasty, but quite expensive, sandwich',
created: new Date().getTime()
};
store.put(item);
return tx.complete;
}).then(function() {
console.log('item updated!');
});
// delete using... you guessed it!dbPromise.then(function(db) {
var tx = db.transaction('store', 'readwrite');
var store = tx.objectStore('store');
store.delete(key);
return tx.complete;
}).then(function() {
console.log('Item deleted');
});

It’s not over, yet!

Using the above operations are pretty much straight forward. But we forgot to address the elephant in the room, Cursor. Remember what we learned before.

Cursor is used to iterate through multiple records in database.
- Taming IndexedDB — Part 1

It selects each object in an object store or index one by one, letting you do something with the data as it is selected. It should be wrapped within transactions, like other operations.

openCursor is used to initiate the cursor, which can accept an optional key range as argument. cursor.continue is used for iterate through objects, until no object remaining, which returns undefined.

dbPromise.then(function(db) {
var tx = db.transaction('store', 'readonly');
var store = tx.objectStore('store');
return store.openCursor();
}).then(function logItems(cursor) {
if (!cursor) {
return;
}
console.log('Cursored at:', cursor.key);
for (var field in cursor.value) {
console.log(cursor.value[field]);
}
return cursor.continue().then(logItems);
}).then(function() {
console.log('Done cursoring');
});

We’re really close to wrap up, but some more things you should master to become the Ultimate IndexedDB Ninja!

Sea ya!

Update: Taming IndexedDB [3/3]

Dani Vijay

Written by

Full Stack Web Dev | Tech Evangelist | https://twitter.com/UtmostDev | https://github.com/danivijay/ | https://linkedin.com/in/danivijay

Beginner's Guide to Mobile Web Development

Tutorials to guide beginners to perform various tasks in the field of Mobile Web Development.

Dani Vijay

Written by

Full Stack Web Dev | Tech Evangelist | https://twitter.com/UtmostDev | https://github.com/danivijay/ | https://linkedin.com/in/danivijay

Beginner's Guide to Mobile Web Development

Tutorials to guide beginners to perform various tasks in the field of Mobile Web Development.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store