HTML5 IndexDB高级使用

IndexDB的优点：
1、允许快速索引和搜索的对象，所以在HTML5 的 web应用程序中， 你可以有效管理你的数据和高效率的读/写操作。
2、W3C主推的离线数据库类型，逐渐替代Web SQL类型数据库，更新效率高并不断完善。
3、工作在异步模式下执行每步操作。让你使用高效率的的JavaScript事件驱动模块。

使用IndexDB：
1、初始化声明

var dbName = "H5AppDB"; //数据库名称
var dbVersion = 2.0; //数据库版本
var tablename = "todo"; //表名

2、初始并实例化IndexDB数据上下文

//定义一个IndexDB方法集合对象
var H5AppDB = {};

//实例化IndexDB数据上下文，这边根据浏览器类型来做选择
var indexedDB = window.indexedDB || window.webkitIndexedDB ||window.mozIndexedDB;

if ('webkitIndexedDB' in window) {
   window.IDBTransaction = window.webkitIDBTransaction;
   window.IDBKeyRange = window.webkitIDBKeyRange;
}

H5AppDB.indexedDB = {};
H5AppDB.indexedDB.db = null;

//错误信息，打印日志
H5AppDB.indexedDB.onerror = function (e) {
   log.debug(e);
};

3、打开数据库,初始化数据库,并创建存储对象

H5AppDB.indexedDB.open = function () {

//初始IndexDB
var request = indexedDB.open(dbName, dbVersion);

request.onsuccess = function (e) {
// Old api: var v = "2-beta"; 
log.debug("success to open DB: " + dbName);
H5AppDB.indexedDB.db = e.target.result;
var db = H5AppDB.indexedDB.db;
if (db.setVersion) {
   console.log("in old setVersion: " + db.setVersion);
   if (db.version != dbVersion) {
      var req = db.setVersion(dbVersion);
      req.onsuccess = function () {
        if (db.objectStoreNames.contains(tablename)) {
           db.deleteObjectStore(tablename);
        }
        var store = db.createObjectStore(tablename, { keyPath: "timeStamp" });//keyPath：主键，唯一性

        var trans = req.result;
        trans.oncomplete = function (e) {
			console.log("== trans oncomplete ==");
			H5AppDB.indexedDB.getAllTodoItems();
		}
	};
	}
	else {
		H5AppDB.indexedDB.getAllTodoItems();
	}
}
	else {
	H5AppDB.indexedDB.getAllTodoItems();
	}
}

//如果版本不一致，执行版本升级的操作
request.onupgradeneeded = function (e) {
log.debug("going to upgrade our DB!");

H5AppDB.indexedDB.db = e.target.result;
var db = H5AppDB.indexedDB.db;
if (db.objectStoreNames.contains(tablename)) {
	db.deleteObjectStore(tablename);
}

var store = db.createObjectStore(tablename, { keyPath: "timeStamp" });//NoSQL类型数据库中必须的主键，唯一性

H5AppDB.indexedDB.getAllTodoItems();
}

request.onfailure = H5AppDB.indexedDB.onerror;
};

4、获取对象信息，并进行轮询读取，然后绑定到页面

//、获取对象信息
H5AppDB.indexedDB.getAllTodoItems = function () {

var todos = document.getElementById("todoItems");
todos.innerHTML = "";



var db = H5AppDB.indexedDB.db;
var trans = db.transaction([tablename], "readwrite");//通过事物开启对象
var store = trans.objectStore(tablename);//获取到对象的值

// Get everything in the store;

var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);//开启索引为0的表

cursorRequest.onsuccess = function (e) {

var result = e.target.result;

if (!!result == false)
return;

renderTodo(result.value);
result.continue();//这边执行轮询读取
};

cursorRequest.onerror = H5AppDB.indexedDB.onerror;
};

//绑定数据
function renderTodo(row) {
var todos = document.getElementById("todoItems");
var li = document.createElement("li");
var a = document.createElement("a");
var t = document.createTextNode(row.text);

a.addEventListener("click", function() {
H5AppDB.indexedDB.deleteTodo(row.timeStamp);
}, false);

a.textContent = " [Delete]";
li.appendChild(t);
li.appendChild(a);
todos.appendChild(li);
};

5、添加数据对象

//4、添加数据对象
H5AppDB.indexedDB.addTodo = function (todoText) {
var db = H5AppDB.indexedDB.db;
var trans = db.transaction([tablename], "readwrite");
var store = trans.objectStore(tablename);

var newArray = new Array("wzh","374532");

//数据以对象形式保存，体现NoSQL类型数据库的灵活性
var data = {
"text": todoText,
"timeStamp": new Date().getTime(),
"obj":newArray 
};

var request = store.put(data);//保存数据

request.onsuccess = function (e) {
H5AppDB.indexedDB.getAllTodoItems();
};

request.onerror = function (e) {
log.debug("Error Adding: ", e);
};
}; 
function addTodo() {
var todo = document.getElementById("todo");
H5AppDB.indexedDB.addTodo(todo.value);
todo.value = "";
}

可以随意添加BJson格式的对象，体现NoSQl类型数据库的优越性…

6、删除数据对象（根据主键删除）

// 删除数据对象
H5AppDB.indexedDB.deleteTodo = function(id) {
var db = H5AppDB.indexedDB.db;
var trans = db.transaction([tablename], "readwrite");
var store = trans.objectStore(tablename);

var request = store.delete(id);//根据主键来删除

request.onsuccess = function(e) {

H5AppDB.indexedDB.getAllTodoItems();
alert("删除成功");
};

request.onerror = function(e) {
log.debug("Error Adding: ", e);
};
};