Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
A Database For The Web
IndexedDB
IndexedDB 2
Who Am I
● @freaktechnik
– See also @MozillaCH
IndexedDB 3
What IndexedDB Is Not
● (Web)SQL
● Synchronous
● Cross-Origin
IndexedDB 4
Initialize A Database
var db = window.indexedDB.open("example", 1);
IndexedDB 5
Initialize A Database
var request = window.indexedDB.open("example", 1);
var db;
// Create the DB structure
re...
IndexedDB 6
Initialize A Database
var request = window.indexedDB.open("example", 1);
var db;
// Create the DB structure
re...
IndexedDB 7
Initialize A Database
var request = window.indexedDB.open("example", 1);
var db;
// Create the DB structure
re...
IndexedDB 8
Key Generators
● Out-of-line keys
– AutoIncrement makes the browser generate a
unique key
– Actual generation ...
IndexedDB 9
Initialize A Database
var request = window.indexedDB.open("example", 1);
var db;
// Create the DB structure
re...
IndexedDB 10
KeyPaths
● W3C:
– „A key path is a DOMString or
sequence<DOMString> that defines how to
extract a key from a ...
IndexedDB 11
KeyPath Example
● "deeper,array,length" is 2
● [ "length", "name" ] is [ 3, "example object" ]
● [ "name", "d...
IndexedDB 12
Use A Database
var transaction = db.transaction(["table"],
"readwrite");
var objectStore = transaction.object...
IndexedDB 13
Use A Database
var transaction = db.transaction(["table"],
"readwrite");
var objectStore = transaction.object...
IndexedDB 14
Use A Database
var transaction = db.transaction(["table"],
"readwrite");
var objectStore = transaction.object...
IndexedDB 15
Using Indexes
var transaction = db.transaction(["table"],
"readonly");
var objectStore = transaction.objectSt...
IndexedDB 16
Iterating With Cursors
var transaction = db.transaction(["table"],
"readonly");
var objectStore = transaction...
IndexedDB 17
KeyRanges
Range Code
Value ≤ x IDBKeyRange.upperBound(x)
Value < x IDBKeyRange.upperBound(x, true)
Value ≥ y ...
IndexedDB 18
CanIUse IndexedDB
● Yes
● No complex structures with IE 10 & 11
● You guessed it, iOS 8
IndexedDB 19
Documentation
● You like W3C madness? http://www.w3.org/TR/IndexedDB/
● You like things organized by interfac...
IndexedDB 20
Examples
● https://github.com/freaktechnik/justintv-stream-notifications/blob/mas
● https://github.com/freakt...
Nächste SlideShare
Wird geladen in …5
×

Indexed db

830 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×