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.

Save your data

434 views

Published on

Short introduction to IndexedDB

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Save your data

  1. 1. Save your dataIntroduction to IndexedDB Paweł Maciejewski @fragphace
  2. 2. Agenda 1. Why Indexed Database? 2. Structure 3. Transactions 4. Database creation 5. Basic IndexedDB pattern 6. Theres (much) more
  3. 3. Why Indexed Database? Answer 1 There are only Web Storage and Indexed Database (Web SQL is deprecated). In many cases Local Storage is too simple. Answer 2 It is good for your programming skills to play with asynchronous API of Indexed Database.
  4. 4. Structure IDB enables (more) advanced key-value data management, Many databases associated with one origin, many object stores associated with one database Its NoSQL: you must take care of mapping relations between data, there is no full text search... . Origin Databases Object stores
  5. 5. Transactions Every request must be performed within a transaction Transaction scope determines the object stores with witch transaction can interact There are three modes of transactions: READ_ONLY READ_WRITE VERSION_CHANGE . Request Request Transaction Request
  6. 6. Database creation 1 // Lets specify db version 2 var connectionReq = window.indexedDB.open(myDB, 3); 3 4 connectionReq.onsuccess = function(event) {}; 5 connectionReq.onerror = function(event) {}; 6 7 connectionReq.onupgradeneeded = function(event) { 8 var connection = event.target.result; 9 var storeNames = connection.objectStoreNames;1011 if (storeNames.contains(workers)) {12 // Delete an object store13 connection.deleteObjectStore(workers);14 }1516 if (!storeNames.contains(employees)) {17 // Create an object store18 connection.createObjectStore(employees, { keyPath: email});19 }20 };
  7. 7. Basic IndexedDB pattern 1 var connectionReq = window.indexedDB.open(myDB, 3); 2 3 connectionReq.onsuccess = function(event) { 4 var connection = event.target.result; 5 var transaction = connection.transaction(employees, IDBTransaction. READ_WRITE); 6 var employees = transaction.objectStore(employees); 7 8 var setReq = employees.set({ 9 email: fragphace@gmail.com,10 name: Pawel Maciejewski11 });1213 var getReq = employees.get(fragphace@gmail.com);1415 // ...16 };
  8. 8. Theres (much) more Cursors, bounds, indexes, cross-window events Not ready for production, new specification implemented only in Firefox 12 Prefixes for indexedDB, IDBTransaction and others
  9. 9. Thank you!
  10. 10. Interested in joining us? More info in the lobby

×