http://photozou.jp/photo/show/1033469/126297401 by je5xkdbnd
Hello
my name is
Tomomi
@girlie_machttp://www.flickr.com/photos/melissacorey/4210541084/ by Melissa Corey bna
objectStore
)
navigator.temporaryStorage.queryUsageAndQuota(
function(usage, quota){...},
function(error){...}
);
* webkitTemporaryStorage
w3.org/TR/quota-api
Basic Async iDB Support
Basic Async iDB Support
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+.
Try the demo on: http://goo.gl/zLG83c
User Interaction
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
});
};
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
}
}
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
};
var tx = db.transaction('shop', 'readwrite');
var objStore = tx.objectStore('shop');
var req = objStore.delete(key);
req.onsuccess = function(e) {
// Display the remaining data
};
You can inspect:
Try on mobile: http://goo.gl/MX7fe
github.com/coremob/camera
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');
Displaying Blob
<img src="blob:958c1b50-09a0-2543-8528-8697ae387667">
var URL = window.URL || window.webkitURL*;
var imgURL = URL.createObjectURL(blob);
setVersion()
vs. onupgradeneeded
IDBTransaction.READ_WRITE
vs. "readwrite"
blob
Prolly, you need to polyfill with Web SQL for now...
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
Tomomi Imura
Slides: girliemac.github.io/presentation-slides/html5-indexedDBTaco cat spelt backwards is taco cat
http://www.flickr.com/photos/ilovepaisley/6943837126/ by ilovepaisleybd