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、初始化声明

            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);
             };
      };

 

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

 

本文源码