The document provides an overview of IndexedDB, a database API for storing structured data locally in the browser. It discusses how to initialize a database and object stores, add, retrieve, and delete data, use indexes to query data more efficiently, and iterate over data using cursors. It also covers key concepts like key paths, key generators, key ranges, and compatibility across browsers. The document aims to explain the basic functionality and usage of IndexedDB.

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