本文主要是介绍HTML5 Web SQL Database 与 Indexed Database 的 CRUD 操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
简介： Web SQL Database 和 Indexed Database 都是在客户端存储大量结构化数据的解决方案。Web SQL Database 实现了传统的基于 SQL 语句的数据库操作，而 Indexed Database 实现了 NoSQL 的存储方式。本文主要对比两者在 CRUD 操作方面的实现方法，按照本文所述读者可以详细了解两者异同。
发布日期： 2012 年 10 月 22 日
级别： 中级
访问情况 ： 374 次浏览
评论： 0 (查看 | 添加评论 - 登录)
平均分 (0个评分) 为本文评分
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 规范的发展，相信未来在客户端存储数据将会越来越容易。
http://www.ibm.com/developerworks/cn/web/1210_jiangjj_html5db/index.html
这篇关于HTML5 Web SQL Database 与 Indexed Database 的 CRUD 操作的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
