indexedDB兼容ff和chrome实例
http://snaketoome.blog.163.com/blog/static/169773401201242121716882
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>IndexedDB</title>
</head>
<body >
<div id="container">
<label for="txtName">
Name:
</label>
<input type="text" id="txtName" name="txtName" />
<br />
<label for="txtEmail">
Email:
</label>
<input type="email" id="txtEmail" name="txtEmail" />
<br />
<input type="button" id="btnAdd" value="Add Record" />
<br />
<label for="txtID">
name:
</label>
<input type="text" id="txtID" name="txtID" />
<br />
<input type="button" id="btnDelete" value="Delete Record" />
<input type="button" id="btnGet" value="Get Record" />
<br />
<input type="button" id="btnPrint" value="Print objectStore" />
<br />
<output id="printOutput">
</output>
</div>
</body>
<script type="text/javascript">
function kk(){
window.db='';
window.storeName='aaa';
window.dbVersion = '1.0';
window.dbName='intent_DB';
initDb();
contentLoaded();
}
function initDb() {
if ('webkitIndexedDB' in window) {
window.indexedDB = webkitIndexedDB;
window.IDBKeyRange = webkitIDBKeyRange;
window.IDBTransaction = window.webkitIDBTransaction;
}
else if ('mozIndexedDB' in window) {
window.indexedDB = mozIndexedDB;
}
else if ('msIndexedDB' in window) {
window.indexedDB = msIndexedDB;
}
var request = indexedDB.open(dbName);
request.onsuccess = function (evt) {
db = this.result;
console.debug(window.db);
if(db.version!=dbVersion){
var dbReq = db.setVersion(dbVersion);
dbReq.onsuccess = function (e) {
var that = {result: this.source};
onUpg.call(that, e);//把改变版本后的source传递到onUpg
};
}
};
request.onerror = function (evt) {
console.log("IndexedDB error: " + evt.target.errorCode);
};
request.onupgradeneeded = onUpg
}
function contentLoaded() {
var btnAdd = document.getElementById("btnAdd");
var btnDelete = document.getElementById("btnDelete");
var btnPrint = document.getElementById("btnPrint");
var btnGet=document.getElementById('btnGet');
btnAdd.onclick=function () {
var name = document.getElementById("txtName").value;
var sort = document.getElementById("txtEmail").value;
var transaction = db.transaction(storeName,IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore(storeName);
var request = objectStore.add({name: name,sort:sort});
request.onsuccess = function (evt) {
alert('添加成功');
};
};
btnDelete.onclick=function () {
var id = document.getElementById("txtID").value;
var transaction = db.transaction(storeName, IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore(storeName);
var request = objectStore.delete(id);
request.onsuccess = function(evt) {
alert('删除成功');
};
request.onerror = function(evt) {
alert('删除失败');
};
};
btnPrint.onclick=function () {
var output = document.getElementById("printOutput");
output.textContent = "";
console.debug(window.db);
var transaction = db.transaction(storeName, IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore(storeName);
var request = objectStore.openCursor();
request.onsuccess = function(evt) {
var cursor = evt.target.result;
if (cursor) {
output.textContent += " name: " + cursor.value.name + " email:"+cursor.value.sort;
cursor.continue();
}
else {
console.log("No more entries!");
}
};
};
btnGet.onclick=function(){
var output = document.getElementById("printOutput");
output.textContent = "";
var id = document.getElementById("txtID").value;
var transaction = db.transaction(storeName, IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore(storeName);
var request = objectStore.get(id);
request.onsuccess = function(evt) {
var cursor = this.result;
if (cursor) {
output.textContent += " name: " + cursor.name + " email:"+cursor.sort;
}
};
request.onerror = function(evt) {
alert('删除失败');
};
}
}
function onUpg(e){
var db = this.result;
var objectStore=db.createObjectStore(storeName, {keyPath: 'name'});
objectStore.createIndex("sort", "sort", {unique: false });
}
kk();
</script>
</html>