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规范的发展，相信未来在客户端存储数据将会越来越容易。
扫一扫
942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
