html 离线笔记 安卓,HTML5项目笔记10：使用HTML5 IndexDB设计离线数据库 – 翁智华...

之前的文章(http://www.cnblogs.com/wzh2010/archive/2012/05/22/2514017.html)里面描述了HTML5 离线数据存储的Web SQL，一个基于SQLite 的离线数据库，不过W3C的WebDatabase规范中说这份规范不再维护了，取而代之的是IndexDB，一个NoSQL类型的数据库。

Html5Rocks把他们的优缺点做了比对,IndexDB综合看来有如下优点：

允许快速索引和搜索的对象，所以在HTML5 的 web应用程序中， 你可以有效管理你的数据和高效率的读/写操作。

W3C主推的离线数据库类型，逐渐替代Web SQL类型数据库，更新效率高并不断完善。

工作在异步模式下执行每步操作。让你使用高效率的的JavaScript事件驱动模块

现在我们来尝试使用这个IndexDB：

1、初始化声明

1 var dbName = “H5AppDB”; //数据库名称

2 var dbVersion = 2.0; //数据库版本

3 var tablename = “todo”; //表名

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

1 //定义一个IndexDB方法集合对象

2 var H5AppDB ={};3

4 //实例化IndexDB数据上下文，这边根据浏览器类型来做选择

5 var indexedDB = window.indexedDB || window.webkitIndexedDB ||window.mozIndexedDB;6

7 if (‘webkitIndexedDB’ inwindow) {8 window.IDBTransaction =window.webkitIDBTransaction;9 window.IDBKeyRange =window.webkitIDBKeyRange;10 }11

12 H5AppDB.indexedDB ={};13 H5AppDB.indexedDB.db = null;14

15 //错误信息，打印日志

16 H5AppDB.indexedDB.onerror = function(e) {17 log.debug(e);18 };

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

1 H5AppDB.indexedDB.open = function() {2

3 //初始IndexDB

4 var request =indexedDB.open(dbName, dbVersion);5

6 request.onsuccess = function(e) {7 //Old api: var v = “2-beta”;

8 log.debug(“success to open DB: ” +dbName);9 H5AppDB.indexedDB.db =e.target.result;10 var db =H5AppDB.indexedDB.db;11 if(db.setVersion) {12 console.log(“in old setVersion: ” +db.setVersion);13 if (db.version !=dbVersion) {14 var req =db.setVersion(dbVersion);15 req.onsuccess = function() {16 if(db.objectStoreNames.contains(tablename)) {17 db.deleteObjectStore(tablename);18 }19 var store = db.createObjectStore(tablename, { keyPath: “timeStamp” });//keyPath：主键，唯一性

20

21 var trans =req.result;22 trans.oncomplete = function(e) {23 console.log(“== trans oncomplete ==”);24 H5AppDB.indexedDB.getAllTodoItems();25 }26 };27 }28 else{29 H5AppDB.indexedDB.getAllTodoItems();30 }31 }32 else{33 H5AppDB.indexedDB.getAllTodoItems();34 }35 }36

37 //如果版本不一致，执行版本升级的操作

38 request.onupgradeneeded = function(e) {39 log.debug(“going to upgrade our DB!”);40

41 H5AppDB.indexedDB.db =e.target.result;42 var db =H5AppDB.indexedDB.db;43 if(db.objectStoreNames.contains(tablename)) {44 db.deleteObjectStore(tablename);45 }46

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

48

49 H5AppDB.indexedDB.getAllTodoItems();50 }51

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

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

1 //、获取对象信息

2 H5AppDB.indexedDB.getAllTodoItems = function() {3

4 var todos = document.getElementById(“todoItems”);5 todos.innerHTML = “”;6

7

8

9 var db =H5AppDB.indexedDB.db;10 var trans = db.transaction([tablename], “readwrite”);//通过事物开启对象

11 var store = trans.objectStore(tablename);//获取到对象的值

12

13 //Get everything in the store;

14

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

17

18 cursorRequest.onsuccess = function(e) {19

20 var result =e.target.result;21

22 if (!!result == false)23 return;24

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

27 };28

29 cursorRequest.onerror =H5AppDB.indexedDB.onerror;30 };31

32 //绑定数据

33 functionrenderTodo(row) {34 var todos = document.getElementById(“todoItems”);35 var li = document.createElement(“li”);36 var a = document.createElement(“a”);37 var t =document.createTextNode(row.text);38

39 a.addEventListener(“click”, function() {40 H5AppDB.indexedDB.deleteTodo(row.timeStamp);41 }, false);42

43 a.textContent = ” [Delete]”;44 li.appendChild(t);45 li.appendChild(a);46 todos.appendChild(li);47 };

效果如下：

5、添加数据对象

1 //4、添加数据对象

2 H5AppDB.indexedDB.addTodo = function(todoText) {3 var db =H5AppDB.indexedDB.db;4 var trans = db.transaction([tablename], “readwrite”);5 var store =trans.objectStore(tablename);6

7 var newArray = new Array(“wzh”,”374532″);8

9 //数据以对象形式保存，体现NoSQL类型数据库的灵活性

10 var data ={11 “text”: todoText,12 “timeStamp”: newDate().getTime(),13 “obj”:newArray14 };15

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

17

18 request.onsuccess = function(e) {19 H5AppDB.indexedDB.getAllTodoItems();20 };21

22 request.onerror = function(e) {23 log.debug(“Error Adding: “, e);24 };25 };26 functionaddTodo() {27 var todo = document.getElementById(“todo”);28 H5AppDB.indexedDB.addTodo(todo.value);29 todo.value = “”;30 }

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

6、删除数据对象(根据主键删除)

1

2 //删除数据对象

3 H5AppDB.indexedDB.deleteTodo = function(id) {4 var db =H5AppDB.indexedDB.db;5 var trans = db.transaction([tablename], “readwrite”);6 var store =trans.objectStore(tablename);7

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

9

10 request.onsuccess = function(e) {11

12 H5AppDB.indexedDB.getAllTodoItems();13 alert(“删除成功”);14 };15

16 request.onerror = function(e) {17 log.debug(“Error Adding: “, e);18 };19 };

W3C已经停止了对Web SQL  的更新，会更加完善对Index的规范草案和标准，所以以后的HTML5应用，有用到离线端数据库这一块，建议优先考虑IndexDB…