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
| IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser |
|---|---|---|---|---|---|---|
| 6.0( × ) | 4.0~7.0( × ) | 10.0~13.0( √ ) | 3.1~3.2( √ ) | 10.5~11.0( √ ) | 3.2( √ ) | 2.1( √ ) |
| 7.0( × ) | 8.0( × ) | 14.0( √ ) | 4.0( √ ) | 11.1( √ ) | 4.0~4.1( √ ) | 2.2( √ ) |
| 8.0( × ) | 9.0( × ) | 15.0( √ ) | 5.0( √ ) | 11.5( √ ) | 4.2~4.3( √ ) | 2.3,3.0( √ ) |
| 9.0( × ) | 10.0( × ) | 16.0( √ ) | 5.1( √ ) | 11.6( √ ) | 5.0( √ ) | 4.0( √ ) |
| 10.0( × ) | 11.0( × ) | 17.0( √ ) | 6.0( √ ) | 12.0( √ ) | ||
| 12.0( × ) | 18.0( √ ) |
表 2. Indexed Databse
| IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser |
|---|---|---|---|---|---|---|
| 6.0( × ) | 4.0~7.0( √ ) | 11.0~13.0( √ ) | 3.1~3.2( × ) | 10.5~11.0( × ) | 3.2( × ) | 2.1( × ) |
| 7.0( × ) | 8.0( √ ) | 14.0( √ ) | 4.0( × ) | 11.1( × ) | 4.0~4.1( × ) | 2.2( × ) |
| 8.0( × ) | 9.0( √ ) | 15.0( √ ) | 5.0( × ) | 11.5( × ) | 4.2~4.3( × ) | 2.3,3.0( × ) |
| 9.0( × ) | 10.0( √ ) | 16.0( √ ) | 5.1( × ) | 11.6( × ) | 5.0( × ) | 4.0( × ) |
| 10.0( √ ) | 11.0( √ ) | 17.0( √ ) | ||||
| 12.0( √ ) | 18.0( √ ) |
浏览器对 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) {
window.IDBTransaction = window.webkitIDBTransaction;
window.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. 添加商品数据
图 1. 添加商品界面
在 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. 读取商品数据
图 2. 购物车列表界面
在 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;
}
3. 更新商品数据
图 3. 更新商品信息界面
在 Web SQL Database 中需要使用传统的 SQL 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;
} 3
3. 删除商品数据
在 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 规范的发展，相信未来在客户端存储数据将会越来越容易。
