Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Indexed db

860 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Indexed db

  1. 1. A Database For The Web IndexedDB
  2. 2. IndexedDB 2 Who Am I ● @freaktechnik – See also @MozillaCH
  3. 3. IndexedDB 3 What IndexedDB Is Not ● (Web)SQL ● Synchronous ● Cross-Origin
  4. 4. IndexedDB 4 Initialize A Database var db = window.indexedDB.open("example", 1);
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18. IndexedDB 18 CanIUse IndexedDB ● Yes ● No complex structures with IE 10 & 11 ● You guessed it, iOS 8
  19. 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. 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

×