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 规范的发展，相信未来在客户端存储数据将会越来越容易。
相关推荐
WebSQL 和 IndexedDB 之间的简单测试 v1.0.0 v2.0.0 改进了用 ES6 和 SASS 编写的项目结构
WebSQL到IndexedDB的示例：待办事项列表示例，显示如何将WebSQL转换为IndexedDB
一个本地数据库（Web SQL IndexedDB）实现的通信录；介绍怎样创建打开数据库，创建表，添加数据，更新数据，删除数据，删除表 等等。
适用于Apache Cordova的WebSQL插件（Windows Phone） 在SQLite库的顶部启用WebSQL功能。 此存储库基于MSOpenTech的。 但是，此插件支持sql的异步执行，其中MSOpenTech的WebSQL插件是完全同步的。 支持平台 该插件仅...
WebSQL和IndexedDB性能的比较
IndexedDB、WebDatabase 和 WebStorage 存储机制上的统一数据访问层。 支持异步 IndexedDB API 的所有功能。 WebSQL 的实现支持模式反射、无类型列键、复合索引、multiEntry 和类似 IndexedDB 的中止和隐式提交事务...
离线存储，改进。使用简单但功能强大的API封装IndexedDB、WebSQL或localStorage.zip
indexedDB的CURD 设置数据库名称 var db = new indexDB("myDB"); 创建新表 db.CreateTable("product", "id"); 插入和更新命令 db.set({ id: 1, name: "milad" }, "product"); 获取数据 db.get(1, "product"); 删除...
IndexedDB Polyfill （另请参阅 ） 在所有台式机和移动浏览器以及Node.js上使用单个可索引的脱机存储API。...此填充程序基本上是一个IndexedDB到WebSQL适配器。 有关该项目的更多（尽管现在很可能已经
在浏览器上有两种数据库：webSQL和IndexedDB。但是如果在浏览器上需要用到数据库一般会使用Indexed DB数据库，webSQL基本上已经废弃了，具体原因小伙伴可以下来自己查查。 IndexedDB 是一种底层 API，用于在客户端...
具有SQL语法的完整IndexedDB包装器。 产品特点 在Web Worker中执行 简单易读的API 简单易学 TypeScript支持 加入支持 数据类型支持 复杂查询支持 Api Sync支持 SQL支持-通过扩展 - 的管理和调试工具。 例子 查看...
相比于Web SQL数据库它更加简单，而且官方标准中关于Web SQL的工作已经停止。 相比于Web Storage，IndexedDB存储空间是无上限且永久的。 创建数据库 IndexedDB是按域名分配独立空间，一个独立域名下可以创建多个...
浏览器存储滥用者是一种工具，可以在LocalStorage，SessionStorage，WebSQL数据库，IndexedDB API和FileSystem API上试验浏览器存储限制。 您可以将任意大小的文件添加到这些存储中，以查看其大小限制。 在Chrome或...
它使用因此我们按此顺序支持IndexedDB，SQLite（Cordova），WebSQL。 可以在Angular 2应用程序中单独使用它。 主要特点： 请求缓存 延迟的可观察缓存（有关更多信息，请参阅文档） 如果浏览器处于离线状态，请勿...
一套入门级别的HTML5数据教程 INDEXED db w3c标准下的数据库使用教程。
web-worker-indexeddb 使用 Web Worker 访问服务器，并将数据保存在 IndexedDB 中以供离线使用。 在 IndexedDB 中保存数据后，应用程序将始终离线访问数据，并将通过 Web Worker 刷新数据。
websql 功能增强，支持多查询标签、F8或Ctrl-R执行、记住数据库、简单查询、历史记录等 v3.0.2 fix bug ------------------------------------ v3.0.1 历史记录根据数据库和sql语句进行去重，首次运行自动清除历史...
- implementing new storage options and web databases, including both WebSQL and IndexedDB - how geolocation works with HTML5 in both web and mobile applications And this new edition adds: - even ...