Who's afraid of front end databases?
0 likes353 views
This document discusses front-end databases and IndexedDB. It begins by describing the limitations of cookies and localStorage for storing data in the browser. It then introduces IndexedDB as an advanced key-value database that provides fast and reliable local data storage with limited capacity. The document demonstrates how to perform basic operations with IndexedDB like opening a database, creating object stores, adding and retrieving data using cursors and indexes. It notes some issues with IndexedDB's verbose API and discusses libraries that provide simpler interfaces. It concludes by explaining how IndexedDB is well-suited for offline and data-driven scenarios.
![IndexedDB â Creating a Transaction
var transaction = db.transaction([âproducts"], âreadwriteâ);
transaction.oncomplete = function(event) { ⊠};
transaction.onerror = function(event) { ⊠};
// will add the object into the objectStore
var objectStore = transaction.objectStore(âproductsâ);
var request = objectStore.add({ id: 7, name: âIndexedDB" });
request.onsuccess = function(event) {
// event.target.result == object.id
}](https://image.slidesharecdn.com/whosafraidoffront-enddatabases-170524104956/85/Who-s-afraid-of-front-end-databases-23-320.jpg)
![IndexedDB â Using a Cursor
var transaction = db.transaction([âproductsâ]);
var objectStore = transaction.objectStore(âproductsâ);
var cursor = objectStore.openCursor();
cursor.onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
âŠ
cursor.continue();
} else {
console.log(âNo entriesâ);
}
};](https://image.slidesharecdn.com/whosafraidoffront-enddatabases-170524104956/85/Who-s-afraid-of-front-end-databases-24-320.jpg)
![IndexedDB â Working with Indexes
var transaction = db.transaction([âproductsâ]);
var objectStore = transaction.objectStore(âproductsâ);
var index = objectStore.index(ânameâ);
var request = index.get(âJohn");
request.onsuccess = function(event) { ⊠};](https://image.slidesharecdn.com/whosafraidoffront-enddatabases-170524104956/85/Who-s-afraid-of-front-end-databases-25-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Who's afraid of front end databases? (20)
Ad
More from Gil Fink (20)
Ad
Recently uploaded (20)
Who's afraid of front end databases?
- 2. WHOâS AFRAID OF FRONT- END DATABASES?
- 3. The problems
- 4. Performance
- 7. WHOâS AFRAID OF FRONT- END DATABASES?
- 8. About Me âą sparXys CEO and senior consultant âą Microsoft MVP in the last 8 years âą Pro Single Page Application Development (Apress) co-author âą 4 Microsoft Official Courses (MOCs) co-author âą GDG Rishon and AngularUP co-organizer
- 9. Agenda âą The options âą IndexedDB âą Working with libraries
- 10. Storing Data in The Browser âą Cookies âą Super small storage, string based, API not friendly âą Web Storage (localStorage / sessionStorage) âą String based dictionary, synchronous API âą Web SQL database âą Deprecated!
- 11. Cookies Are such an old technologyâŠ
- 12. DEMO: COOKIES
- 13. How localStorage feels like
- 16. IndexedDB âą Advanced key-value data management IndexedDB Front-end App Fast Reliable Limited capacity Local access only Information loss
- 17. IndexedDB Database objectStore Cursor on objectStore key : value key : value key : value Index Cursor on index
- 18. IndexedDB API âą Very massive! âą Asynchronous âą Important note: synchronous APIs were deprecated by W3C âą Exposed through window.indexedDB object
- 21. IndexedDB â Open the Database var db; var request = window.indexedDB.open(âdbName"); request.onerror = function(event) { ⊠}; request.onsuccess = function(event) { db = request.result; };
- 22. IndexedDB â Creating an objectStore var request = indexedDB.open(âdbNameâ, 2); request.onupgradeneeded = function(event) { // Create an objectStore to hold information about customers. var objectStore = db.createObjectStore(âproducts", { keyPath: âid" }); // Create an index to search customers by name. objectStore.createIndex("name", "name", { unique: false }); };
- 23. IndexedDB â Creating a Transaction var transaction = db.transaction([âproducts"], âreadwriteâ); transaction.oncomplete = function(event) { ⊠}; transaction.onerror = function(event) { ⊠}; // will add the object into the objectStore var objectStore = transaction.objectStore(âproductsâ); var request = objectStore.add({ id: 7, name: âIndexedDB" }); request.onsuccess = function(event) { // event.target.result == object.id }
- 24. IndexedDB â Using a Cursor var transaction = db.transaction([âproductsâ]); var objectStore = transaction.objectStore(âproductsâ); var cursor = objectStore.openCursor(); cursor.onsuccess = function(event) { var cursor = event.target.result; if (cursor) { ⊠cursor.continue(); } else { console.log(âNo entriesâ); } };
- 25. IndexedDB â Working with Indexes var transaction = db.transaction([âproductsâ]); var objectStore = transaction.objectStore(âproductsâ); var index = objectStore.index(ânameâ); var request = index.get(âJohn"); request.onsuccess = function(event) { ⊠};
- 26. DEMO: LETâS CODE WITH INDEXEDDB
- 27. IndexedDB Problems? âą Verbose syntax âą Too much boilerplate âą No support for queries style SQL âą No full text search âą And more
- 28. Libraries to the Rescue âą Dixie.js - http://dexie.org/ âą localForage - https://github.com/localForage/localForage âą PouchDB - https://pouchdb.com/ âą Working with Angular? you are covered âą Angular 1 service - https://github.com/bramski/angular-indexedDB âą angular2-indexeddb service - https://github.com/gilf/angular2-indexeddb
- 29. DEMO: DIXIE
- 30. Where IndexedDB Shines? âą Data driven scenarios âą As a hybrid application database âą Combined with Service Workers âą Or for any offline scenarios
- 31. Summary âą IndexedDB is a full blown database in your appâs front-end âą It can help you to persist your front-end data âą IndexedDB is suitable for offline scenarios
- 32. Resources âą IndexedDB on MDN - http://mzl.la/1u1sngQ âą angular2-indexeddb - https://github.com/gilf/angular2-indexeddb âą My Website â http://www.gilfink.net âą Follow me on Twitter â @gilfink
- 33. Thank You!