Taming IndexedDB [1/3]

Dani Vijay
Mar 3, 2018 · 3 min read

After I had quit my job and started to learn JavaScript, Progressive Web Apps aka PWA was the thing in my mind (along with some artificial intelligence and machine learning fancy stuff, of course). Switching from LAMP to MEVN was not that hard, but it took time! I thought it was better to step into the PWA only after learning the basics well.

All of it changed suddenly, once I got enrolled into Google Udacity Challenge Scholarship in Mobile Web Specialist track. I was skeptical about the encounter, but trust me, taming IndexedBD is not that hard. Let me tell you how.

So what are you waiting for?

IndexedDB is a transactional database embedded in the browser. The database is organized around the concept of collections of JSON objects similarly to NoSQL databases such as MongoDB. Each object is identified with a key generated during insert. An indexing system optimizes access to stored objects.

That’s pretty much it. Take a look at the following before the deep dive.

5 things to remember

Database

Highest level of IndexedDB. You can create multiple databases, but generally there is one database per app. We store everything in here.

Object Stores

Consider them as tables or collections in databases. Imagine an app which stores movie information for users, there might be 2 stores — one for user and other for movies. Unlike tables in traditional databases, the actual JavaScript data types of data within the store do not need to be consistent.

Index

It is a kinda object store for organizing data for another object store. For example, if you’re storing users, you may want to fetch them later by their name or favorite movies.

Operations and Transactions

You might be wondering why I’m trying to put these together. Because I said 5 things to remember, god dammit!! And I don’t have a gif that favors six. Let me continue. Operations are, well.. operations.. or.. interactions to the DB.

A transaction is wrapper around an operation, or group of operations, for database integrity. All read or write operations in IndexedDB must be part of a transaction. And, if one of then fail, none of them will get applied.

Cursor

Used to iterate through multiple records in database.

Finally, it’s time to get hands dirty!

Using Jake Archibald’s IndexedDB Promised API, which is built around IndexedDB with promises. Got really small footprint and enables to write elegant code compared to spaghetti making tendency of native API.

From now on, I will be using the examples from mostly. They spend their time to make some good examples, and I respect that. So, it makes sense!

However, I’m gonna explain it from my perspective. In fact, planning to shrink things up a bit, to be frank. You may think I’m super lazy, but trust me. That’s all it takes to master it. Fair enough, right?

It is essential to check browser support for IDB before opening the database using idb.open

(function() {
'use strict';

//check for support
if (!('indexedDB' in window)) {
console.log('This browser doesn\'t support IndexedDB');
return;
}

var dbPromise = idb.open('test-db1', 1);

})();

Create an Object Store

Let’s create an object store. createObjectStore is used for the same. Pretty straight forward, isn’t it? But it is essential to check that object stores exists already, before creating it.

(function() {
'use strict';

//check for support
if (!('indexedDB' in window)) {
console.log('This browser doesn\'t support IndexedDB');
return;
}

var dbPromise = idb.open('test-db2', 1, function(upgradeDb) {
console.log('making a new object store');
if (!upgradeDb.objectStoreNames.contains('firstOS')) {
upgradeDb.createObjectStore('firstOS');
}
});

})();

There are some options can be added while object creation, such as defining primary key. KeyPathstands for unique key, and it is possible to use it with or without autoIncrement

upgradeDb.createObjectStore('logs', {keyPath: 'id', autoIncrement:true});

Remember what I told about Indexes

It is a kinda object store for organizing data for another object store. For example, if you’re storing users, you may want to fetch them later by their name or favorite movies.

Let’s make some.

(function() {
'use strict';

//check for support
if (!('indexedDB' in window)) {
console.log('This browser doesn\'t support IndexedDB');
return;
}

var dbPromise = idb.open('test-db4', 1, function(upgradeDb) {
if (!upgradeDb.objectStoreNames.contains('people')) {
var peopleOS = upgradeDb.createObjectStore('people', {keyPath: 'email'});
peopleOS.createIndex('gender', 'gender', {unique: false});
peopleOS.createIndex('ssn', 'ssn', {unique: true});
}
if (!upgradeDb.objectStoreNames.contains('notes')) {
var notesOS = upgradeDb.createObjectStore('notes', {autoIncrement: true});
notesOS.createIndex('title', 'title', {unique: false});
}
if (!upgradeDb.objectStoreNames.contains('logs')) {
var logsOS = upgradeDb.createObjectStore('logs', {keyPath: 'id',
autoIncrement: true});
}
});
})();

Mastering IDB is not for weak-minded, but prophecy says you are the chosen one! Stay tuned for part 2 to play with some data!

Till then…

Update :

Beginner's Guide to Mobile Web Development

Tutorials to guide beginners to perform various tasks in…

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.

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

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.

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