大体流程是这样
1.打开数据库
var indexeddb = window.indexeddb || window.webkitindexeddb || window.mozindexeddb; if ('webkitindexeddb' in window) { window.idbtransaction = window.webkitidbtransaction; window.idbkeyrange = window.webkitidbkeyrange; } //这个就不解释了 var request = indexeddb.open("adsageidb"); //open ： indexeddb只有这一个方法 打开（数据库名） request.onsuccess = function(e) { //异步 var v = "1.00"; var db = e.target.result; if (v!= db.version) { var setvrequest = db.setversion(v); setvrequest.onsuccess = function(e) { //异步 if(db.objectstorenames.contains("todo")) { db.deleteobjectstore("todo"); } var store = db.createobjectstore("todo", {keypath: "adsid"});//onsuccess 后创建objectstore 暂时用到两个参数，数据库&&主键 } } }
这样就 创建/连接 了一个数据库
2.创建交互对象 && 监听dom事件 && 处理数据
然后就是要操作数据库了
//插入数据 暂时只插入一列 var trans = db.transaction(["todo"], idbtransaction.read_write);//创建transaction var store = trans.objectstore("todo");//创建store //要操作数据必须建立transaction 和 store var data = { "text": todotext, "adsid": new date().gettime() };//一个小数据 adsid是主键 var request = store.put(data); //‘强行’插入 request.onsuccess = function(e) { //成功后执行一些操作 }; request.onerror = function(e) { console.log("error adding: ", e); };
//读取数据 var trans = db.transaction(["todo"], idbtransaction.read_write); var store = trans.objectstore("todo"); var keyrange = idbkeyrange.lowerbound(0); var cursorrequest = store.opencursor(keyrange); //这里用到指针cursor ,opencursor的参数 keyrange是遍历范围 还可以添加遍历方向参数 //另一种方法是get() 这个就比较简单了直接store.get('键值')就行 cursorrequest.onsuccess = function(e) { var result = e.target.result; if(!!result == false) return; console.log(result.value); result.continue(); //循环读取所有数据 };
//删除数据 ... store.delete('键值') ...
出了一个小demo
<!doctype html> <html> <head> <script> var indexeddb = window.indexeddb || window.webkitindexeddb || window.mozindexeddb; if ('webkitindexeddb' in window) { windowwindow.idbtransaction = window.webkitidbtransaction; windowwindow.idbkeyrange = window.webkitidbkeyrange; } adsageidb = {}; adsageidb.db = null; adsageidb.onerror = function(e) { console.log(e); }; adsageidb.open = function() { var request = indexeddb.open("adsageidb"); request.onsuccess = function(e) { var v = "1.00"; adsageidb.db = e.target.result; var db = adsageidb.db; if (v!= db.version) { var setvrequest = db.setversion(v); setvrequest.onerror = adsageidb.onerror; setvrequest.onsuccess = function(e) { if(db.objectstorenames.contains("todo")) { db.deleteobjectstore("todo"); } var store = db.createobjectstore("todo", {keypath: "adsid"}); adsageidb.getalltodoitems(); }; } else { adsageidb.getalltodoitems(); } }; request.onerror = adsageidb.onerror; } adsageidb.addtodo = function(todotext) { var db = adsageidb.db; var trans = db.transaction(["todo"], idbtransaction.read_write); var store = trans.objectstore("todo"); var data = { "text": todotext, "adsid": new date().gettime() }; var request = store.put(data); request.onsuccess = function(e) { adsageidb.getalltodoitems(); }; request.onerror = function(e) { console.log("error adding: ", e); }; }; adsageidb.deletetodo = function(id) { var db = adsageidb.db; var trans = db.transaction(["todo"], idbtransaction.read_write); var store = trans.objectstore("todo"); var request = store.delete(id); request.onsuccess = function(e) { adsageidb.getalltodoitems(); }; request.onerror = function(e) { console.log("error adding: ", e); }; }; adsageidb.getalltodoitems = function() { var todos = document.getelementbyid("todoitems"); todos.innerhtml = ""; var db = adsageidb.db; var trans = db.transaction(["todo"], idbtransaction.read_write); var store = trans.objectstore("todo"); var keyrange = idbkeyrange.lowerbound(0); var cursorrequest = store.opencursor(keyrange); cursorrequest.onsuccess = function(e) { var result = e.target.result; if(!!result == false) return; rendertodo(result.value); result.continue(); }; cursorrequest.onerror = adsageidb.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() { adsageidb.deletetodo(row.adsid); }, false); a.textcontent = " [删除]"; li.appendchild(t); li.appendchild(a); todos.appendchild(li) } function addtodo() { var todo = document.getelementbyid("todo"); adsageidb.addtodo(todo.value); todo.value = ""; } function init() { adsageidb.open(); } window.addeventlistener("domcontentloaded", init, false); </script> </head> <body> <ul id="todoitems"></ul> <input type="text" id="todo" name="todo" placeholder="adsageidb text?" /> <input type="submit" value="增加一个 idb" onclick="addtodo(); return false;"/> </body> </html>
以上这篇html5 初试 indexeddb(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考。