在html5 webstorage介绍了html5本地存储的local storage和session storage，这两个是以键值对存储的解决方案，存储少量数据结构很有用，但是对于大量结构化数据就无能为力了，灵活大不够强大。
web sql database我们经常在数据库中处理大量结构化数据，html5引入web sql database概念，它使用 sql 来操纵客户端数据库的 api，这些 api 是异步的，规范中使用的方言是sqllite，悲剧正是产生于此，web sql database规范页面有着这样的声明
this document was on the w3c recommendation track but specification work has stopped. the specification reached an impasse: all interested implementors have used the same sql backend (sqlite), but we need multiple independent implementations to proceed along a standardisation path.
大概意思就是
这个文档曾经在w3c推荐规范上，但规范工作已经停止了。目前已经陷入了一个僵局：目前的所有实现都是基于同一个sql后端（sqlite），但是我们需要更多的独立实现来完成标准化。
也就是说这是一个废弃的标准了，虽然部分浏览器已经实现，但。。。。。。。
三个核心方法但是我们学一下也没什么坏处，而且能和现在w3c力推的indexeddb做比较，看看为什么要废弃这种方案。web sql database 规范中定义的三个核心方法：
opendatabase：这个方法使用现有数据库或新建数据库来创建数据库对象
transaction：这个方法允许我们根据情况控制事务提交或回滚
executesql：这个方法用于执行sql 查询
opendatabase我们可以使用这样简单的一条语句，创建或打开一个本地的数据库对象
var db = opendatabase('testdb', '1.0', 'test db', 2 * 1024 * 1024);
opendatabase接收五个参数：
数据库名字
数据库版本号
显示名字
数据库保存数据的大小（以字节为单位 )
回调函数（非必须)
如果提供了回调函数，回调函数用以调用 changeversion() 函数，不管给定什么样的版本号，回调函数将把数据库的版本号设置为空。如果没有提供回调函数，则以给定的版本号创建数据库。
transactiontransaction方法用以处理事务，当一条语句执行失败的时候，整个事务回滚。方法有三个参数
包含事务内容的一个方法
执行成功回调函数（可选）
执行失败回调函数（可选）
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")');
});
这个例子中我们创建了一个table，并在表中插入三条数据，四条执行语句任何一条出现错误，整个事务都会回滚
executesqlexecutesql方法用以执行sql语句，返回结果，方法有四个参数
查询字符串
用以替换查询字符串中问号的参数
执行成功回调函数（可选）
执行失败回调函数（可选）
在上面的例子中我们使用了插入语句，看个查询的例子
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);
}
});
完整示例<!doctype html><html><head>
<title>web sql database</title></head><body>
<script type="text/javascript">
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);
}
});
}); </script></body></html>
最后由于web sql database规范已经被废弃，原因说的很清楚，当前的sql规范采用sqlite的sql方言，而作为一个标准，这是不可接受的，每个浏览器都有自己的实现这还搞毛的标准。这样浏览器兼容性就不重要了，估计慢慢会被遗忘。不过chrome的控制台真心好用啊，神马cookie、local storage、session storage、web sql、indexeddb、application cache等html5新增内容看的一清二楚，免去了很多调试代码工作。
以上就是html5本地存储-web sql database的详情介绍的详细内容。