// DB
var request = window.indexedDB.open(
"CandyDB",
"My candy store database");
request.onsuccess = function(event) {
var db = event.result;
if (db.version != "1") {
//
} else {
//
loadData(db);
}
};
//
var createdObjectStoreCount = 0;
var objectStores = [
{ name: "kids", keyPath: "id", autoIncrement: true },
{ name: "candy", keyPath: "id", autoIncrement: true },
{ name: "candySales", keyPath: "", autoIncrement: true }
];
function objectStoreCreated(event) {
if (++createdObjectStoreCount == objectStores.length) {
db.setVersion("1").onsuccess = function(event) {
loadData(db);
};
}
}
for (var index = 0; index < objectStores.length; index++) {
var params = objectStores[index];
// DB
request = db.createObjectStore(params.name, params.keyPath,
params.autoIncrement);
//
request.onsuccess = objectStoreCreated;
}
var kids = [
{ name: "Anna" },
{ name: "Betty" },
{ name: "Christine" }
];
// DB
var request = window.indexedDB.open(
"CandyDB",
"My candy store database");
request.onsuccess = function(event) {
var objectStore = event.result.objectStore("kids");
for (var index = 0; index < kids.length; index++) {
var kid = kids[index];
//
objectStore.add(kid).onsuccess = function(event) {
document.getElementById("display").textContent =
"Saved record for "+kid.name+" with id "+event.result;
};
}
};
// DB
var request = window.indexedDB.open(
"CandyDB",
"My candy store database");
request.onsuccess = function(event) {
//
request = event.result.objectStore("kids").openCursor();
request.onsuccess = function(event) {
var cursor = event.result;
// cursor null
if (!cursor) {
return;
}
var element = document.createElement("div");
element.textContent = cursor.value.name;
document.getElementById("kidList").appendChild(element);
cursor.continue();
};
};
Web Storage
http://dev.w3.org/html5/webstorage/Overview.html
Web SQL Database
http://dev.w3.org/html5/webdatabase/
Indexed Database
http://www.w3.org/TR/IndexedDB/
Firefox 4 Indexed Database API
https://dev.mozilla.jp/hacksmozillaorg/firefox-4-an-early-walk-through-of-
indexeddb/
Simple to-do list with jQuery and local storage.
http://www.tuttoaster.com/tag/html5/