Web SQL Database介绍
HTML 5那个Web Storage里头，除了大家熟知的本地存储Local Storage和会话存储Session Storage这两种类型以外，还有一种叫做Web SQL Database的概念。你也可以把它理解为一种用SQL管理客户端数据库的方法，尽管这个规范现在不再更新，但依然很有价值去研究。说白了，就是为了应对大规模的结构化数据，让浏览器也能有数据库那样的操作手段呗。不过，因为规范停滞不前，现在我们就得来仔细看看这种方式的特性，跟其他存储方案比起来怎么样。
Web SQL Database规范中的核心方法
我们在网上用到的Web SQL Database有三种主要方法：openDatabase、transaction和executeSql，它们能帮我们建数据库、搞事务和运行SQL查询。用这几个方法，我们就能随心所欲地操控客户端上的数据库了，无论是存储还是检索数据都很方便。虽然现在这个规范已经不太实用了，但是看看还是挺有意思，能让我们更好地理解浏览器里的数据库操作是怎么回事。
openDatabase方法详解
要用Web SQL Database做点事儿，首先得掌握这个开数据库户头儿的灵魂招式——openDatabase。你只需传它几个必需的参数（名字小版本号，数据容量啥的）就能搞好数据库模型。更厉害的是，它还能接个小回调函数做后手，里面你爱怎么折腾都行！尽管现在官方对这东西有点不待见了，但是学懂了这个openDatabase，你就对创建数据库有更深的理解。
咱们平时用的时候，只需要简单地调用 openDatabase 这个方法，填点儿数据库名，版本啊啥的，再按照自己的需要设个回调函数和其它细节，就能搞定了。这样就能在网页上搞出个符合你要求的数据库环境！
transaction方法应用场景
Web SQL Database上的Transaction方法真的很强大！它能准确应对执行SQL语句出错导致的问题，让整个事务回到开始前的状态。这样的设计特别适合处理那些复杂的数据操作，对咱们来说是个好帮手~
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
咱们在开发时，用上这个 transaction 方法就能把好几条 SQL 语句放在一起运行，形成了一套完整的事务流程。要是中途出了岔子，比如哪条语句没能跑起来，那么整件事情就会打回原形，保证不会有任何的数据丢失或者乱七八糟的情况发生。特别是涉及到那些敏感信息或者对数据准确度要求特别高的地方，这种防护措施就尤其关键！
executeSql方法实践演示
在Web SQL Database里头，你知道那个叫啥子吗？就是那个能让咱们给数据库运行SQL查询命令然后还能收到结果的。只要传给它个查询字符串这样的东西，咱就能在网页上轻松玩转数据库，而且还能按照查询出来的结果来做自己想做的事情。这个方法还有成功或者失败的回调函数拿来用，让咱们能根据执行的情况继续后续的步骤！
比如说，咱们完全可以用executeSql解决问题！比如把一条SQL命令输进去，该插就插，该更就更，该删就删——就这么简单！然后根据返回结果做点提示或者告诉用户，就搞定！这样一来，咱们就能跟客户端的那个数据库打交道，想弄啥就弄啥了。这个办法可是给程序员们省了大功夫，直接操纵客户端的数据库，方便得很呀～
Web SQL Database废弃原因分析
虽然Web SQL Database早就是W3C推荐标准，但用起来还是有困难，结果就没用了。最大的缺点就是大家都用SQLite当后台数据库，没啥多样性和独立性。这一来让Web SQL Database既不能完全满足规范要求，又很难平衡各方面的利害关
因为Web SQL Database这东西已经过时了，而且还有一堆麻烦没搞定，所以HTML5正在制定的新规则里已经不怎么提它了。做开发的同学们和用得起的小伙伴们，找地方存数据的时候要考虑一下将来可能会有什么变化，早点儿做好准备。
db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
});
与IndexedDB比较
对于被淘汰的Web SQL Database，我们有一个新朋友，那就是HTML5下的IndexedDB。这个东东功能强，效率高，能满足客户对数据的各种需求，而且大部分浏览器都支持它，也让很多开发者选择用它来编程。比起老旧的Web SQL Database，IndexedDB更贴近现在的WEB标准，还更能适应不同环境，方便升级！
IndexedDB作为新趋势，在浏览器本地存储的领域中越来越受欢迎了，成了大家都爱用的稳定可靠的选项之一。现在，开发人员更愿意选择它来做客户端数据库处理，逐渐取代那些像Web SQL Database那样过时的技术方法。
结语与思考
说到HTML5 WebStorage的那个WebSQLDatabase，我们就研究了它有啥特别之处，搞懂了怎么用和跟别的存储方式比哪个好之类的话题。虽然WebSQLDatabase现在已经不搞了，还有好多问题解决不了，但是学完它的思想和用途还是有意义的。
你们觉得在现在这个WEBGAME开发圈子里，怎么看老旧技术和新的解决办法？有用过像Web SQL Database或IndexedDB这样的方法来做过项目吗？赶紧留言聊聊你们的想法和经历！
db.transaction(function (context) {
context.executeSql('SELECT * FROM testTable', [], function (context, results) {
var len = results.rows.length, i;
console.log('Got '+len+' rows.');
for (i = 0; i < len; i++){
console.log('id: '+results.rows.item(i).id);
console.log('name: '+results.rows.item(i).name);
}
});
Web SQL Database
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
});
db.transaction(function (context) {
context.executeSql('SELECT * FROM testTable', [], function (context, results) {
var len = results.rows.length, i;
console.log('Got '+len+' rows.');
for (i = 0; i < len; i++){
console.log('id: '+results.rows.item(i).id);
console.log('name: '+results.rows.item(i).name);
}
});
});
。
评论0