IndexedDB:
storing data locally on browsers with HTML5

• Mobile Front-end, UI/UX Developer
• Open Web Advocate at Nokia
• Working with W3C Communities
• Formally at Palm webOS, Yahoo! Mobile etc.

Storing Data with HTML5

Cookies

http://www.flickr.com/photos/melissacorey/4210541084/ by Melissa Corey bna

HTML5 DOM Storage

Local Storage

• Persistent and scoped to the origin

Session Storage

• Non persistent - scoped only to the current window

WebSQL

Deprecated by W3C

IndexedDB

Quota Management API

		
navigator.temporaryStorage.queryUsageAndQuota(
    function(usage, quota){...}, 
    function(error){...}
  );

* webkitTemporaryStorage

w3.org/TR/quota-api

Browser Support

Basic Async iDB Support

Mobile Browser Support

Basic Async iDB Support

Feature Detection

var indexedDB = window.indexedDB || 
                window.webkitIndexedDB ||
                window.mozIndexedDB;
if(indexedDB) {
   // Yay, iDB is supported!
} 
		

• Chrome < 23 & Blackberry require the webkit prefix.
• Firefox < 16 requires the moz prefix.
• Pre-released ver IE10 requires ms, but not production IE10+.

Demo: Grocery List

+

Try the demo on: http://goo.gl/zLG83c

Creating A Simple Grocery List

1. Open an iDB
2. Retrieve data
3. Display the data

User Interaction

• Add an item
• Delete an item

Opening a DB

if(indexedDB) {
   var req = indexedDB.open('myDatabase'); 
   
   // async callbacks
   req.onsuccess = function(e) {
      ...
   };
   ...
} 
		
		

Latest spec (FF, IE10, Chrome >= 23)

...
req.onsuccess = function(e) {
   // retrieve data from DB
};
req.onerror = function(e) {console.log(e);};

req.onupgradeneeded = function(e) {
   e.target.result.createObjectStore('shop', {
      keyPath: 'id', autoIncrement: true
   });
};
		
		

Retrieve All Data

var tx = db.transaction('shop', 'readonly');
var objStore = tx.objectStore('shop');
var cursorReq = objStore.openCursor();  
var arr = [];
cursorReq.onsuccess = function(e) {
   var cursor = e.target.result;
   if(cursor) {
      arr.push(cursor.value);
      cursor.continue();
   } else {
      // Display the data in DOM
   }
}
		
		

Add Data

var input = document.getElementsByTagName('input')[0];
var data = {
   item: input.value,
   created: new Date()
};
var tx = db.transaction('shop', 'readwrite');	    
var objStore = tx.objectStore('shop');      
var req = objStore.put(data);
               
req.onsuccess = function(e) {
   // Display the data
};
		

Delete Data

var tx = db.transaction('shop', 'readwrite');
var objStore = tx.objectStore('shop');
var req = objStore.delete(key);
      
req.onsuccess = function(e) {
   // Display the remaining data
};
		

Chrome DevTools

You can inspect:

Try on mobile: http://goo.gl/MX7fe

github.com/coremob/camera

Storing Blob

e.g. Convert a canvas data to blob, then store it in iDB

canvas.toBlob(function(blob) {
   data = {
        name: 'cat',
        photo: blob
    };
   var tx = db.transaction('gallery', 'readwrite');	    
   var objStore = tx.objectStore('gallery');      
   var req = objStore.put(data);
   ...
}, 'image/jpeg');
		

Blob URLs

Displaying Blob

<img src="blob:958c1b50-09a0-2543-8528-8697ae387667">

var URL = window.URL || window.webkitURL*;
var imgURL = URL.createObjectURL(blob);
		

So, can we use it now?

So, can we use it now?

Meh: Spotty Browser Support

• Safari and Opera (presto) do not support at all
• Deprecated specs: Chrome <24, Firefox <13, & BB 10
• setVersion() vs. onupgradeneeded
• IDBTransaction.READ_WRITE vs. "readwrite"
• Chrome uses string for version
• Chrome & Opera (blink) does not support blob

Polyfill

Prolly, you need to polyfill with Web SQL for now...

• IndexedDB Shim by Parashuram "Axe" Narasimhan
• IndexedDB-polyfill by Facebook

	Indexed DB	Web SQL
Chrome 31	Yes	Yes
Opera 17	Yes	Yes
Blackberry 10	Yes	Yes
Firefox 25	Yes	No
IE 11	Yes	No
Safari 7	No	Yes
Android 4.2	No	Yes

caniuse.com

Thank you!

Tomomi Imura

• girliemac.com
• twitter.com/girlie_mac
• github.com/girliemac
• speakerdeck.com/girlie_mac

Slides: girliemac.github.io/presentation-slides/html5-indexedDB

Mandatory Kitteh