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
| 4.0~7.0( × ) | 10.0~13.0( √ ) | 3.1~3.2( √ ) | 10.5~11.0( √ ) | 3.2( √ ) | 2.1( √ ) |
| 8.0( × ) | 14.0( √ ) | 4.0( √ ) | 11.1( √ ) | 4.0~4.1( √ ) | 2.2( √ ) |
| 9.0( × ) | 15.0( √ ) | 5.0( √ ) | 11.5( √ ) | 4.2~4.3( √ ) | 2.3,3.0( √ ) |
| 10.0( × ) | 16.0( √ ) | 5.1( √ ) | 11.6( √ ) | 5.0( √ ) | 4.0( √ ) |
| 11.0( × ) | 17.0( √ ) | 6.0( √ ) | 12.0( √ ) | ||
| 12.0( × ) | 18.0( √ ) |
表 2. Indexed Databse
| 4.0~7.0( √ ) | 11.0~13.0( √ ) | 3.1~3.2( × ) | 10.5~11.0( × ) | 3.2( × ) | 2.1( × ) |
| 8.0( √ ) | 14.0( √ ) | 4.0( × ) | 11.1( × ) | 4.0~4.1( × ) | 2.2( × ) |
| 9.0( √ ) | 15.0( √ ) | 5.0( × ) | 11.5( × ) | 4.2~4.3( × ) | 2.3,3.0( × ) |
| 10.0( √ ) | 16.0( √ ) | 5.1( × ) | 11.6( × ) | 5.0( × ) | 4.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 规范的发展，相信未来在客户端存储数据将会越来越容易。
相关推荐
HTML5是现代网页开发的重要标准，它引入了许多新特性，其中本地存储技术是提升Web应用离线可用性和性能...通过学习和实践这些基本操作，开发者能够熟练地在Web应用程序中利用HTML5的Web SQL Database进行本地数据管理。
其中，HTML5的`canvas`元素和Web SQL Database是两个重要的组成部分，它们在本案例中结合使用，实现了动态图形绘制和客户端数据存储的功能。 `canvas`元素是HTML5中的一个画布，它允许开发者通过JavaScript进行像素...
虽然Web SQL数据库在新的HTML5标准中已被Web Storage（localStorage和sessionStorage）和IndexedDB所替代，因为它们更安全、更灵活且更符合现代Web开发的需求，但理解Web SQL的工作原理对于理解客户端存储的历史和...
在选择WebSQL与IndexedDB时，开发者应考虑项目需求、兼容性、数据规模和查询效率等因素。现代项目通常倾向于使用IndexedDB，因为它有更好的浏览器支持、更大的数据处理能力，以及更高效的异步操作机制。同时，使用...
在HTML5中，Web SQL的API主要通过window.openDatabase()方法来访问和操作数据库。 创建Web SQL数据库的过程如下： 1. 使用window.openDatabase()方法，传入数据库的名称、版本、描述和大小（以字节为单位）。例如：...
HTML5 Web SQL Database 是一种离线存储技术，允许网页应用在本地存储大量数据，以便在离线状态下也能正常运行。本篇文章将详细解析在Web SQL中进行事务处理的关键函数`transaction`和`executeSQL`。 1. **事务处理...
需要注意的是，虽然Web SQL在某些场景下非常实用，但由于缺乏跨浏览器的支持和维护，现在更推荐使用IndexedDB，它是HTML5标准的一部分，提供了更广泛的浏览器兼容性和更强大的数据管理能力。然而，对于那些仍然需要...
八、WebSQL的局限性与替代方案 虽然WebSQL提供了强大的本地存储能力，但由于维护问题，W3C已经停止了其标准化进程。目前，更推荐使用IndexedDB或Web Storage（包括localStorage和sessionStorage）作为替代方案，它们...
anysql-websql是针对anysql库的一个扩展，它允许开发者在浏览器环境中利用Web SQL数据库进行数据操作。Web SQL提供了一个SQLite数据库的子集，支持SQL查询，可以在客户端进行数据的持久化存储。anysql-websql库的...
### 五、WebSQL与IndexedDB比较 IndexedDB虽然更复杂，但提供了更多的功能和灵活性，如索引、对象存储和更大的存储空间。它更适合存储复杂数据结构，而WebSQL更适合简单的关系型数据。 ### 六、替代方案 由于Web...
WebSQL是Web应用程序本地存储数据的一种机制，尤其适用于离线应用。它是一个内置于浏览器中的SQLite数据库，允许JavaScript在客户端进行复杂的数据操作，无需服务器的交互。本学习实例将深入探讨WebSQL的基本概念、...
在本项目中，"jquery+easyui+web...虽然WebSQL已经过时，但其背后的思想——即在客户端存储数据以提高性能和用户体验——在现代Web开发中仍然非常重要，现在通常使用IndexedDB或者LocalStorage+Service Worker来实现。
本文将详细解析HTML5的存储机制，包括session storage和local storage，并介绍如何利用JavaScript进行Web SQL数据库操作。 首先，HTML5引入了session storage和local storage两种存储方式，以解决HTTP cookies存在...
在Android上实现本地通讯录访问，需要使用HTML5的Web SQL Database或IndexedDB来存储通讯录数据，同时利用PhoneGap或Cordova这样的框架将JavaScript API与Android原生API桥接。PhoneGap提供了一个名为`contacts`的...
尽管现在更多的前端开发倾向于使用 IndexedDB 或者 LocalStorage，但 WebSQL 依然在一些项目中发挥着作用，尤其是对于那些需要复杂查询操作的应用。 WebSQL API 基于 SQLite3，SQLite3 是一个轻量级的关系型数据库...
HTML5应用开发技术中的Web SQL数据库是一个离线存储解决方案，特别适用于需要在用户浏览器中存储大量结构化数据的Web应用程序。尽管HTML5还提供了localStorage和sessionStorage，它们只能存储简单的键值对，不适合...
JavaScript提供了两种主要的离线存储解决方案：WebSQL和IndexedDB。这两个API都允许开发者在用户的浏览器中存储大量数据，以实现离线访问或提高应用程序的性能。然而，它们各自有着不同的特性和性能表现，下面我们将...
HTML5中的WebSQL是一种在客户端浏览器中使用的数据库存储机制，它允许开发者在浏览器中进行SQL数据库的查询和操作，类似本地数据库的操作方式。下面将详细介绍WebSQL数据库的知识点。 首先，WebSQL并不是HTML5的一...