Skip to content

Instantly share code, notes, and snippets.

@greenido

greenido/indexDB-demo2.html

Created June 24, 2011 21:16
Show Gist options
  • Save greenido/1045707 to your computer and use it in GitHub Desktop.
Save greenido/1045707 to your computer and use it in GitHub Desktop.
Download ZIP
IndexDB demo for Chrome and FF
Raw
indexDB-demo2.html
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title>IndexDB Demo - Version 1.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<!--
* MDC - fixit day
* Ido Green
* Date: 6/24/2011
*
-->
<header>Indexed DB: Demo</header>
<aside class="note">
<section>
This demo requires FF4 or Google Chrome 67461 or greater.
</section>
</aside>
<section>
<pre style="font-size:20px">var idbRequest = window.<b>indexedDB</b>.<b>open</b>('Database Name');
idbRequest.onsuccess = function(e) {
<b>var db = this.result</b>;
var transaction = db.<b>transaction</b>([], <b>IDBTransaction.READ_ONLY</b>);
var curRequest = transaction.<b>objectStore</b>('ObjectStore Name').<b>openCursor</b>();
curRequest.<b>onsuccess</b> = ...;
};
</pre>
<div class="hcenter" id="indexeddb-example">
<p>
<button onclick="indexedDbSample.idbCreate()">create objectStore</button>
<button onclick="indexedDbSample.idbRemove()">remove objectStore</button>
</p>
<input type="text" placeholder="key" id="idb-key" size="10" /> <input type="text" placeholder="value" id="idb-value" size="10" />
<button onclick="indexedDbSample.idbSet()">set</button>
<div id="idb-log"></div>
<div class="record-list" id="idb-results-wrapper"></div>
</div>
<script>
var indexedDbSample = (function() {
var idb_;
var idbRequest_;
var idbLog_ = document.getElementById('idb-log');
var idResultsWrapper_ = document.getElementById('idb-results-wrapper');
// IndexedDB spec is still evolving, various browsers keep it
// behind various flags and implementation varies.
if ('webkitIndexedDB' in window) {
window.indexedDB = window.webkitIndexedDB;
window.IDBTransaction = window.webkitIDBTransaction;
} else if ('mozIndexedDB' in window) {
window.indexedDB = window.mozIndexedDB;
}
// Open our IndexedDB if the browser supports it.
if (window.indexedDB) {
idbRequest_ = window.indexedDB.open("Test", "A test object store.");
idbRequest_.onerror = idbError_;
idbRequest_.addEventListener('success', function(e) {
idb_ = idbRequest_.result || e.result; // FF4 requires e.result. IDBRequest.request isn't set :(
idbShow_(e);
}, false);
}
function idbError_(e) {
idbLog_.innerHTML += '<p class="error">Error: ' +
e.message + ' (' + e.code + ')</p>';
}
function idbShow_(e) {
if (!idb_.objectStoreNames.contains('myObjectStore')) {
idbLog_.innerHTML = "<p>Object store not yet created.</p>";
return;
}
var html = [];
var transaction = idb_.transaction([], IDBTransaction.READ_ONLY); // Ready is default.
var request = transaction.objectStore("myObjectStore").openCursor(); // Get all results.
// This callback will continue to be called until we have no more results.
request.onsuccess = function(e) {
var cursor = request.result || e.result; // FF4 requires e.result. IDBRequest.request isn't set :(
if (!cursor) {
idResultsWrapper_.innerHTML = '<ul class="record-list" id="idb-results">' + html.join('') + '</ul>';
return;
}
html.push('<li><span class="keyval" contenteditable onblur="indexedDbSample.updateKey(\'',
cursor.key, '\', this)">', cursor.key, '</span> ',
'=> <span class="keyval" contenteditable onblur="indexedDbSample.updateValue(\'',
cursor.key, '\', this)">', cursor.value, '</span>&nbsp; ',
'<a href="javascript:void(0)" onclick="indexedDbSample.deleteKey(\'',
cursor.key, '\')">[Delete]</a></li>');
cursor.continue();
}
request.onerror = idbError_;
}
function idbCreate_() {
if (!idb_) {
if (idbRequest_) {
idbRequest_.addEventListener('success', idb_.removeObjectStore, false); // If indexedDB is still opening, just queue this up.
}
return;
}
var request = idb_.setVersion('the new version string');
request.onerror = idbError_;
request.onsuccess = function(e) {
if (!idb_.objectStoreNames.contains('myObjectStore')) {
try {
var objectStore = idb_.createObjectStore('myObjectStore', null); // FF is requiring the 2nd keyPath arg. It can be optional :(
idbLog_.innerHTML = "<p>Object store created.</p>";
} catch (err) {
idbLog_.innerHTML = '<p class="error">' + err.toString() + '</p>';
}
} else {
idbLog_.innerHTML = '<p class="error">Object store already exists.</p>';
}
}
}
function idbSet_() {
if (!idb_) {
if (idbRequest_) {
idbRequest_.addEventListener('success', idb_.removeObjectStore, false); // If indexedDB is still opening, just queue this up.
}
return;
}
if (!idb_.objectStoreNames.contains('myObjectStore')) {
idbLog_.innerHTML = "<p class=\"error\">Object store doesn't exist.</p>";
return;
}
// Create a transaction that locks the world.
var objectStore = idb_.transaction([], IDBTransaction.READ_WRITE)
.objectStore("myObjectStore");
var request = objectStore.put(
document.getElementById('idb-value').value,
document.getElementById('idb-key').value);
request.onerror = idbError_;
request.onsuccess = idbShow_;
}
function updateKey_(key, element) {
var newKey = element.textContent;
var transaction = idb_.transaction([], IDBTransaction.READ_WRITE); // Create a transaction that locks the world.
var objectStore = transaction.objectStore("myObjectStore");
var request = objectStore.get(key);
request.onerror = idbError_;
request.onsuccess = function(e) {
var value = e.result || this.result; // FF4 requires e.result. IDBRequest.request isn't set :(;
if (objectStore.delete) {
var request = objectStore.delete(key);
} else {
var request = objectStore.remove(key); // FF4 not up to spect
}
request.onerror = idbError_;
request.onsuccess = function(e) {
var request = objectStore.add(value, newKey);
request.onerror = idbError_;
request.onsuccess = idbShow_;
};
};
}
function updateValue_(key, element) {
var transaction = idb_.transaction([], IDBTransaction.READ_WRITE); // Create a transaction that locks the world.
var objectStore = transaction.objectStore("myObjectStore");
var request = objectStore.put(element.textContent, key);
request.onerror = idbError_;
request.onsuccess = idbShow_;
}
function deleteKey_(key) {
var transaction = idb_.transaction([], IDBTransaction.READ_WRITE); // Create a transaction that locks the world.
var objectStore = transaction.objectStore("myObjectStore");
if (objectStore.delete) {
var request = objectStore.delete(key);
} else {
var request = objectStore.remove(key); // FF4 not up to spect
}
request.onerror = idbError_;
request.onsuccess = idbShow_;
}
function idbRemove_() {
if (!idb_) {
if (idbRequest_) {
idbRequest_.addEventListener('success', idb_.removeObjectStore, false); // If indexedDB is still opening, just queue this up.
}
return;
}
var request = idb_.setVersion("the new version string");
request.onerror = idbError_;
request.onsuccess = function(e) {
if (idb_.objectStoreNames.contains('myObjectStore')) {
try {
// Spec has been updated to deleteObjectStore.
if (idb_.deleteObjectStore) {
idb_.deleteObjectStore('myObjectStore');
} else {
idb_.removeObjectStore('myObjectStore');
}
idResultsWrapper_.innerHTML = '';
idbLog_.innerHTML = "<p>Object store removed.</p>";
} catch (err) {
idbLog_.innerHTML = '<p class="error">' + err.toString() + '</p>';
}
} else {
idbLog_.innerHTML = "<p class=\"error\">Object store doesn't exist.</p>";
}
};
}
return {
idbSet: idbSet_,
idbCreate: idbCreate_,
idbRemove: idbRemove_,
updateKey: updateKey_,
updateValue: updateValue_,
deleteKey: deleteKey_
}
})();
</script>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment