indexedDB是存储大量结构化数据的API，demo中用到的是异步API，麻烦的就是所有对indexedDB的操作都会发生一个异步的‘请求’，只要熟悉了API操作起来也很 简单 。@H_ 406 _1@
大体流程是这样
1.打开 数据库
JavaScript Code 复制内容到剪贴板
VAR &nbs p; indexedDB = window.indexedDB || window. webkit IndexedDB || window.mozIndexedDB; if ( 'webk IT IndexedDB' in window) { window.ID BT ransaction = window.webkitIDBTransaction; window.IDBKeyRange = window.webkitIDBKeyRange; } //这个就不解释了 var request = indexedDB.o PE n( "adsag ei DB" ); //open ： indexedDB只有这一个方法 打开（数据库名） request.onsuccess = function (e) { //异步 var v = "1.00" ; var db = e.t arg et.result; if (v!= db.version) { var setVrequest = db.setVersion(v); setVrequest.onsuccess = function (e) { //异步 if (db.objectSto rename s.cont ai ns( "todo" )) { db.deleteObject Store ( "todo" ); } var store = db.createObjectStore( "todo" , {keyPath: "adsid" }); //onsuccess 后创建ObjectStore 暂时用到两个参数，数据库 && 主键 } } }
这样就 创建/连接 了一个数据库
2.创建交互对象 & am p;& 监听dom事件 && 处理数据
然后就是要操作数据库了
JavaScript Code 复制内容到剪贴板
// 插入数据 暂时只插入一列 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); };
JavaScript Code 复制内容到剪贴板
//读取数据 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 (); //循环读取所有数据 };
JavaScript Code 复制内容到剪贴板
//删除数据 .. . store. delete ( '键值' ) ...
出了一个小demo
XM L/HT ML Code 复制内容到剪贴板
<!DOCTYPE html > < html > < head > < script > var indexedDB = window .indexedDB || window.webkitIndexedDB || window.mozIndexedDB; if ('webkitIndexedDB' in window) { window window.IDBTransaction = window.webkitIDBTransaction; window window.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.objectStore names .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 to DOS = 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 = "s ub mit" value = "增加一个 IDB" onclick = "addTodo(); return false;" /> </ body > </ html >
以上这篇html5 初试 indexedDB(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文地址：http://HdhCmsTestcn blog s .COM /and ROI dshouce/ Arch ive/2016/07/21/5690444.html
总结
以上是 为你收集整理的 html5 初试 indexedDB(推荐) 全部内容，希望文章能够帮你解决 html5 初试 indexedDB(推荐) 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5 初试 indexedDB(推荐)的详细内容...