HTML5 Web SQL Database与Indexed Database的CRUD操作

HTML5 简介

HTML标准自1999年12月发布的HTML 4.01后，后继的HTML 5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组 - WHATWG）的组织，HTML5草案的前身名为Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接纳，并成立了新的HTML工作团队。HTML 5的第一份正式草案已于2008年1月22日公布。HTML 5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。HTML5规范可以参考W3C官方网站

Web SQL Database和Indexed Database简介

Web SQL Database介绍

Web SQL Database API实际上未包含在HTML 5规范之中，它是一个独立的规范，它引入了一套使用SQL操作客户端数据库的API，这些API有同步的，也有异步的，同步版本的API只在工作线程（Worker Threads）上有用，由于并不是所有的浏览器都支持工作线程，一般情况下，都会使用异步API。它的核心方法有三个：openDatabase，transaction和executeSql。这些API已经被广泛的实现在了不同的浏览器里，尤其是手机端浏览器。虽然W3C官方在2011年11月声明已经不再维护Web SQL Database规范，但由于其广泛的实现程度，了解这些API对 Web开发还是非常有必要的。详细的Web SQL Database规范可以参考官方网站。

Indexed Database介绍

Indexed Database，也可简称为IndexedDB（以前被称作WebSimpleDB），同样是一个Web客户端存储结构化数据的规范，在2009年由Oracle提出。如果说Web SQL Databae在客户端实现了传统的SQL数据库操作，那么Indexed Database更类似于NoSQL的形式来操作数据库，其中最重要的是Indexed Database不使用SQL作为查询语言。其数据存储可以不需要固定的表格模式，也经常会避免使用SQL的JOIN操作，并且一般具有水平可扩展性。目前W3C官方也把焦点投到对Indexed Database规范的制定当中来，而Microsoft和Mozilla是对这个规范重要的两个推动者，Firefox 4以上已经部分实现了Indexed DB API，并且IE 10中也将实现Indexed DB API。由于在手机等移动设备的浏览器中都没有实现Indexed DB API，所以其还有一定的局限性，但这并不妨碍它作为未来的HTML5的焦点而存在。详细的Indexed Database规范可以参考官方网站。

浏览器对Web SQL Database和Indexed Database支持情况

表1.Web SQL Databse

Web SQL Databse

表 2.Indexed Databse

Indexed Databse

浏览器对Web SQL Database和Indexed Database支持的更详细信息可以参考网站When can I use...

Web SQL Database和Indexed Database的CRUD操作

本文以网上购物中的购物车为例，在场景中，用户可以添加多个商品到购物车，并且可以在购物车中进行删除修改等操作。而购物车的数据用户希望关闭浏览器后仍然存在，以便下 次用户再次打开此网站，仍可以看到这些购物车中的商品。这个场景比较适合用客户端数据库存储购物车中的商品，因为这些商品是结构化的数据，并且购物车中可能会存在大量商品。以下示例 code 在 Chrome 16.0 中通过测试。

1.创建数据库以及相应的表

在Web SQL Database中，由于内嵌的是SQLite数据库，所以仍需用SQL语句创建表 , 而列的数据类型可以参考SQLite数据库支持的数据类型。应用Web SQL Database API提供的OpenDatabase方法创建ShoppingCartDB数据库，并且应用传统的CREATE TABLE SQL句法创建ShoppingCart表。

清单1. Web SQL Database创建操作

var dbInfo={        dbName:"ShoppingCartDB",  // 名称      dbVersion:"0.1", // 版本      dbDisplayName:"Shopping Cart Database", // 显示名称      dbEstimatedSize:10*11024*1024  // 大小 (byte)    };              var db;    function createDB(){        db = window.openDatabase(dbInfo.dbName , dbInfo.dbVersion ,            dbInfo.dbDisplayName , dbInfo.dbEstimatedSize);    }     function dbError(tx, error){        console.error(error);    }     function createShoppingCartTable(){        db.transaction(function(tx){        tx.executeSql(           "CREATE TABLE IF NOT EXISTS ShoppingCart " +           "(Id TEXT PRIMARY KEY, Name TEXT, Price REAL,Count INTEGER,Desc TEXT)", [],           function(){ console.log('ShoppingCart database created successfully!' ); },            dbError            );        });    }  

在Indexed Database中，ObjectStore代替了传统的表概念。每个ObjectStore相当于一个key和value的集合，key相当于传统数据库表中的主键，每个数据库可以有多个 ObjectStore。创建数据库时需要使用Indexed Database API的open方法，创建ShoppingCartDB，并且调用createObjectStore方法创建ShoppingCart ObjectStore。

清单 2.Indexed Database创建操作

var dbInfo={        dbName:"ShoppingCartDB",  // 名称      dbVersion:"0.1"// 版本   };              var db;    var indexedDB = window.indexedDB || window.webkitIndexedDB;     if ('webkitIndexedDB' in window) {        windowwindow.IDBTransaction = window.webkitIDBTransaction;        windowwindow.IDBKeyRange = window.webkitIDBKeyRange;    }     function createDBAndShoppingCartTable(){        var request = indexedDB.open(dbInfo.dbName);        request.onsuccess = function(evt) {            db = evt.target.result;            // 只能在 setVersion 事务中创建 Object Stores;            if (dbInfo.dbVersion!= db.version) {                var setVReq = db.setVersion(dbInfo.dbVersion);                // onsuccess 方法是唯一创建 Object Stores 的地方               setVReq.onerror = dbError;                setVReq.onsuccess = function() {                    if(db.objectStoreNames.contains("ShoppingCart")) {             db.deleteObjectStore("ShoppingCart");                    }                    db.createObjectStore("ShoppingCart",{keyPath: "id"});                   refreshShoppingCart();                };            }            else{                refreshShoppingCart();            }        };        request.onerror = dbError;    }     function dbError(error){        console.error(error);    }  

2.添加商品数据

添加商品界面

在Web SQL Database中仍需使用传统的SQL INSERT操作，向表中添加数据。Web SQL Database API提供的方法可以使用参数形式向表中插入数据。

清单 3.Web SQL Database添加数据操作

function insertDataToShoppingCart(data){        db.transaction(function(tx){            tx.executeSql("INSERT INTO ShoppingCart " +               "(Id, Name,Price,Count,Desc) VALUES (?,?,?,?,?)" ,                [data.id, data.name,data.price,data.count,data.desc],                function(tx, result){                    refreshShoppingCart();                },                dbError            );        });    }   

在Indexed Database中需要使用ObjectStore的put方法，把key和value添加到ObjectStore中。

清单 4.Indexed Database添加数据操作

//data 是个 JavaScript 对象结构是 {id:String,item:Object}    //data 中的 item 属性是个对象，包括商品的信息，例如名称，价格等   function insertOrUpdateDataToShoppingCart(data){        console.log("insertOrUpdateDataToShoppingCart",data);        var trans = db.transaction(["ShoppingCart"], IDBTransaction.READ_WRITE);        var store = trans.objectStore("ShoppingCart");        var request = store.put(data);        request.onsuccess = function(e) {            refreshShoppingCart();        };        request.onerror = dbError;    }  

3.读取商品数据

购物车列表界面

在Web SQL Database可以使用SQL的SELECT语句查询出所有的记录，然后遍历行数据，获取所有商品信息。

清单 5.Web SQL Database读取数据操作

function refreshShoppingCart(){        dojo.byId("shoppingCartTableData").innerHTML="";        db.transaction(function(tx){            tx.executeSql("SELECT * FROM ShoppingCart" ,[],                function(tx, result){                    for(var i=0;i<result.rows.length;i++){              var item=result.rows.item(i);             var shoppingCart = dojo.byId("shoppingCartTableData");             var tableRow = dojo.create("tr",{},shoppingCart);             dojo.create("td",{"innerHTML":item.Name},tableRow);             dojo.create("td",{"innerHTML":item.Price},tableRow);             dojo.create("td",{"innerHTML":item.Count},tableRow);             dojo.create("td",{"innerHTML":item.Desc},tableRow);             dojo.create("td",{"innerHTML":item.Price*item.Count},tableRow);             var actions = dojo.create("td",{},tableRow);             var btnDelete = new dijit.form.Button({                           "label":"删除",                           "onClick":(function(id){                     return function(){deleteDataFromShoppingCart(id)}}                 )(item.Id)             });             var btnUpdate = new dijit.form.Button({                            "label":"更新",                            "onClick":(function(item){return function(){                     showUpdateDataDialog(                         {id:item.Id,name:item.Name,price:item.Price,                         count:item.Count,desc:item.Desc});                 }})(item)             });             actions.appendChild(btnDelete.domNode);             actions.appendChild(btnUpdate.domNode);                    }                },                dbError            );        });    }  

在Indexed Database中需要根据其提供的查询API进行数据的查询。这里使用IDBKeyRange这个对象确定需要查询数据的上下限，在调用ObjectStore提供的openCursor方法，传进 IDBKeyRange对象作为参数。然后像使用数据库游标一样，在onsuccess回调方法中，获取数据对象，每次获取下一行数据时需要调用result对象的continue方法。

清单 6.Indexed Database读取数据操作

function refreshShoppingCart(){        dojo.byId("shoppingCartTableData").innerHTML="";        var trans = db.transaction(["ShoppingCart"], IDBTransaction.READ_ONLY);        var store = trans.objectStore("ShoppingCart");        var keyRange = IDBKeyRange.lowerBound(0);// 查询所有数据       var cursorReq = store.openCursor(keyRange);        cursorReq.onsuccess = function(evt) {            var result = evt.target.result;            if(!result)return;// 没有数据返回           var item = result.value.item            var shoppingCart = dojo.byId("shoppingCartTableData");            var tableRow = dojo.create("tr",{},shoppingCart);            dojo.create("td",{"innerHTML":item.name},tableRow);            dojo.create("td",{"innerHTML":item.price},tableRow);            dojo.create("td",{"innerHTML":item.count},tableRow);            dojo.create("td",{"innerHTML":item.desc},tableRow);            dojo.create("td",{"innerHTML":item.price*item.count},tableRow);            var actions = dojo.create("td",{},tableRow);            var btnDelete = new dijit.form.Button({               "label":"删除",               "onClick":(function(id){                    return function(){deleteDataFromShoppingCart(id)}}                )(result.value.id)            });            var btnUpdate = new dijit.form.Button({               "label":"更新",               "onClick":(function(item){return function(){             showUpdateDataDialog({id:result.value.id,name:item.name,             price:item.price,count:item.count,desc:item.desc});                }})(item)            });            actions.appendChild(btnDelete.domNode);            actions.appendChild(btnUpdate.domNode);            result.continue();// 继续读取下一行操作       };        cursorReq.onerror = dbError;    }  

4.更新商品数据

更新商品信息界面

在Web SQL Database 需要使用传统的 QL UPDATE 作更新数据库表中的数据。

清单 7.Web SQL Database更新数据操作

function updateDataToShoppingCart(data){        console.log("updateDataToShoppingCart",data);        db.transaction(function(tx){            tx.executeSql("UPDATE ShoppingCart SET " +               "Name = ?, Price = ? , Count = ?,Desc = ? WHERE Id = ?" ,                [data.name,data.price,data.count,data.desc,data.id],                function(tx, result){                    refreshShoppingCart();                },                dbError            );        });    }  

在Indexed Database操作中，更新数据和添加数据的方法是一样，如果data中的id在ObjectStore中已经存在了，将进行更新操作，否则将添加新数据

清单 8.Indexed Database更新数据操作

function insertOrUpdateDataToShoppingCart(data){        console.log("insertOrUpdateDataToShoppingCart",data);        var trans = db.transaction(["ShoppingCart"], IDBTransaction.READ_WRITE);        var store = trans.objectStore("ShoppingCart");        var request = store.put(data);        request.onsuccess = function(e) {            refreshShoppingCart();        };        request.onerror = dbError;    } 

4.删除商品数据

在Web SQL Database中需要使用传统的SQL DELETE操作删除数据库中表记录。

清单 9.Web SQL Database删除数据操作

function deleteDataFromShoppingCart(id){    console.log("deleteDataFromShoppingCart",id);    db.transaction(function(tx){        tx.executeSql("DELETE FROM ShoppingCart WHERE Id = ?" ,            [id],            function(tx, result){                refreshShoppingCart();            },            dbError        );    });   }  

在Indexed Database ，需要使用API中ObjectStore的delete方法，传进key值作为参数，删除相应的记录。

清单 10.Indexed Database删除数据操作

function deleteDataFromShoppingCart(id){    console.log("deleteDataFromShoppingCart",id);    var trans = db.transaction(["ShoppingCart"], IDBTransaction.READ_WRITE);    var store = trans.objectStore("ShoppingCart");    var request = store.delete(id);    request.onsuccess = function(e) {        refreshShoppingCart();    };    request.onerror = dbError;   }  

结束语

本文基于购物车示例详细介绍了Web SQL Database和Indexed Database的CRUD操作，从代码简洁程度来看，Indexed Database的操作更清晰。但Web SQL Database的操作方式对传统开发人员来说更友好。由于在不同的平台上浏览器对两种客户端数据库的支持程度的差异，分别掌握两种客户端数据库的操作方法还是非常有必要的。 随着HTML5规范的发展，相信未来在客户端存储数据将会越来越容易。

来自：developerWorks中文站