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.
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...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Social Media The World Of Public Relations
Next
Upcoming SlideShare
Social Media The World Of Public Relations
Next
Download to read offline and view in fullscreen.

Share

Indexed db

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

1,456

On Slideshare

0

From embeds

0

Number of embeds

17

Actions

Downloads

11

Shares

0

Comments

0

Likes

0

×