An introduction to the JS database Indexed DB including its concepts and APIs

1. A Database For The Web
IndexedDB

2. IndexedDB 2
Who Am I
● @freaktechnik
– See also @MozillaCH

3. IndexedDB 3
What IndexedDB Is Not
● (Web)SQL
● Synchronous
● Cross-Origin

4. IndexedDB 4
Initialize A Database
var db = window.indexedDB.open("example", 1);

5. IndexedDB 5
Initialize A Database
var request = window.indexedDB.open("example", 1);
var db;
// Create the DB structure
request.onupgradeneeded = function(e) {
db = e.target.result;
};

6. IndexedDB 6
Initialize A Database
var request = window.indexedDB.open("example", 1);
var db;
// Create the DB structure
request.onupgradeneeded = function(e) {
db = e.target.result;
};
// Get the DB if it already exists
request.onready = function(e) {
db = e.target.result;
};

7. IndexedDB 7
Initialize A Database
var request = window.indexedDB.open("example", 1);
var db;
// Create the DB structure
request.onupgradeneeded = function(e) {
db = e.target.result;
var table = db.createObjectStore("table", {
keyPath: "id",
autoIncrement: true
});
};

8. IndexedDB 8
Key Generators
● Out-of-line keys
– AutoIncrement makes the browser generate a
unique key
– Actual generation is browser dependent and
shouldn't matter to you
● In-line keys
– You set a unique key in the object

9. IndexedDB 9
Initialize A Database
var request = window.indexedDB.open("example", 1);
var db;
// Create the DB structure
request.onupgradeneeded = function(e) {
db = e.target.result;
var table = db.createObjectStore("table", {
keyPath: "id",
autoIncrement: true
});
table.createIndex("anIndex", ["two", "keys"],
{ unique: true });
};

10. IndexedDB 10
KeyPaths
● W3C:
– „A key path is a DOMString or
sequence<DOMString> that defines how to
extract a key from a value.“
● Describe one or multiple properties in an object
● Commas to step into an object
● Arrays to select multiple properties

11. IndexedDB 11
KeyPath Example
● "deeper,array,length" is 2
● [ "length", "name" ] is [ 3, "example object" ]
● [ "name", "deeper,array" ] is [ "example object",
[ 0, 1 ] ]
{
name: "example object",
length: 3,
deeper: { array: [ 0, 1 ] }
}

12. IndexedDB 12
Use A Database
var transaction = db.transaction(["table"],
"readwrite");
var objectStore = transaction.objectStore("table");
// Add some data to the object store
var request = objectStore.add({
"two": 2,
"keys": [ "some data"]
});
request.onsuccess = function(e) {
var id = request.result.id;
};
request.onerror = function(error) {
// error is a DOMError.
};

13. IndexedDB 13
Use A Database
var transaction = db.transaction(["table"],
"readwrite");
var objectStore = transaction.objectStore("table");
// Add an array of things to the db
array.forEach(function(data) {
objectStore.add(data);
});
transaction.oncomplete = function(e) {
// all the items have now been added.
};

14. IndexedDB 14
Use A Database
var transaction = db.transaction(["table"],
"readwrite");
var objectStore = transaction.objectStore("table");
// Add some data to the object store
var request = objectStore.put(obj);
var request = objectStore.delete(id);
var request = objectStore.clear();
var request = objectStore.get(id);
// You can optionally limit it on specific keys with
keyRange
var request = objectStore.count(keyRange);
// cursor & indexes: coming up next
var index = objectStore.index(indexName);
var request = objectStore.openCursor(...);

15. IndexedDB 15
Using Indexes
var transaction = db.transaction(["table"],
"readonly");
var objectStore = transaction.objectStore("table");
// let's use an index
var index = objectStore.index("anIndex");
// let's read something from the index
var request = index.get([ 2, "some data" ]);
request.oncomplete = function(e) {
callback(request.result);
};

16. IndexedDB 16
Iterating With Cursors
var transaction = db.transaction(["table"],
"readonly");
var objectStore = transaction.objectStore("table");
// Iterate over all elements
var keyRange = IDBKeyRange.bound(1, 5);
var request = objectStore.openCursor(keyRange,
"next");
request.onsuccess = function(e) {
var cursor = e.target.result;
if(cursor) {
doSomethingWith(cursor.value);
cursor.continue();
}
};

17. IndexedDB 17
KeyRanges
Range Code
Value ≤ x IDBKeyRange.upperBound(x)
Value < x IDBKeyRange.upperBound(x, true)
Value ≥ y IDBKeyRange.lowerBound(y)
Value > y IDBKeyRange.lowerBound(y, true)
y ≤ Value ≤ x IDBKeyRange.bound(y, x)
y < Value ≤ x IDBKeyRange.bound(y, x, true)
y ≤ Value < x IDBKeyRange.bound(y, x, false, true)
y < Value < x IDBKeyRange.bound(y, x, true, true)
Value = z IDBKeyRange.only(z)

18. IndexedDB 18
CanIUse IndexedDB
● Yes
● No complex structures with IE 10 & 11
● You guessed it, iOS 8

19. IndexedDB 19
Documentation
● You like W3C madness? http://www.w3.org/TR/IndexedDB/
● You like things organized by interface?
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

20. IndexedDB 20
Examples
● https://github.com/freaktechnik/justintv-stream-notifications/blob/mas
● https://github.com/freaktechnik/mines.js/blob/master/src/highscores.
● https://github.com/mdn/to-do-notifications/tree/gh-pages