Web sql 数据库 API 并不是 html5 规范的一部分，它是 一个 独立的规范，引入了一组使用 sql 操作客户端 数据库 的 APIs
Web sql 核心 方法
下表列出了在 Web sql 规范中定义的三个核心 方法
方法 描述 openDatabase 使用现有的 数据库 或者新建的 数据库 创建 一个 数据库 对象 transaction 让我们能够控制 一个 事务，以及基于这种情况执行提交或者回滚 execute sql 用于执行实际的 sql 查询
打开 数据库
方法 ?openDatabase()?用来打开 一个 数据库
如果 数据库 不存在，则会创建 一个 新的 数据库
使用 方法
var?db?=?openDatabase('ysdb','1.0','My?f irs t?DB',2?*?1024?*?1024,function(){});
参数说明
参数
说明
'ysDB'
数据库 名称
'1.0'
版本号
'My f irs t DB '
描述文本
'2 * 1024 * 1024'
数据库 大小
func
创建回调，回调 函数 会在创建 数据库 后被 调用
执行 查询 操作
方法 ?database.transaction()?用来执行 一个 事物 查询 操作
var?db?=?openDatabase('ysdb',2?*?1024?*?1024);
db.transaction(function?(tx)?{??
???tx.execute sql ('CREATE?TABLE?IF?NOT?EXISTS?logs?(id?unique,log)');
});
上面的范例执行后会在 'ysdb' 数据库 中创建 一个 名为 logs 的表
插入数据
创建了 数据库 后，我们可以使用下面的语句插入一些数据
var?db?=?openDatabase('ysdb',2?*?1024?*?1024);
db.transaction(function?(tx)?{
???tx.execute sql ('CREATE?TABLE?IF?NOT?EXISTS?logs?(id?unique,log)');
???tx.execute sql ('INSERT?INTO?logs?(id,log)?VALUES?(1,"简单编程")');
???tx.execute sql ('INSERT?INTO?logs?(id,log)?VALUES?(2,"www.F2er.com")');
});
我们也可以使用动态值来插入数据
var?db?=?openDatabase('ysdb',2?*?1024?*?1024);
db.transaction(function?(tx)?{??
??tx.execute sql ('CREATE?TABLE?IF?NOT?EXISTS?logs?(id?unique,log)');
??tx.execute sql ('INSERT?INTO?logs?(id,log)?VALUES?(?,?)',[e_id,e_log]);
});
范例中的 e_id 和 e_log 是外部变量，execute sql 会映射数组参数中的每个条目给 "?"
读取数据
我们可以使用下面的语句从读取 数据库 中已经存在的数据
var?db?=?openDatabase('ysdb',2?*?1024?*?1024);
db.transaction(function?(tx)?{
???tx.execute sql ('CREATE?TABLE?IF?NOT?EXISTS?logs?(id?unique,"www.F2er.com")');
});
db.transaction(function?(tx)?{
???tx.execute sql ('SELECT?*?FROM?logs',[],function?(tx,results)?{
??????var?len?=?results.rows.length,i;
??????msg?=?"<p> 查询 记录条数:?"?+?len?+?"</p>";
??????document.querySelector('#status').innerhtml?+=??msg;
??????for?(i?=?0;?i?<?len;?i++){
?????????alert(results.rows.item(i).log?);
??????}
???},null);
});
完整的范例
var?db?=?openDatabase('ysdb',2?*?1024?*?1024);
var?msg;
db.transaction(function?(tx)?{
????tx.execute sql ('CREATE?TABLE?IF?NOT?EXISTS?logs?(id?unique,log)');
????tx.execute sql ('INSERT?INTO?logs?(id,"简单编程")');
????tx.execute sql ('INSERT?INTO?logs?(id,"www.F2er.com")');
????msg?=?'<p>数据表已创建，且插入了两条数据</p>';
????document.querySelector('#status').innerHTML?=??msg;
});
db.transaction(function?(tx)?{
tx.execute sql ('SELECT?*?FROM?logs',results)?{
????var?len?=?results.rows.length,i;
????msg?=?"<p> 查询 记录条数:?"?+?len?+?"</p>";
????document.querySelector('#status').innerHTML?+=??msg;
????for?(i?=?0;?i?<?len;?i++){
????????msg?=?"<p><b>"?+?results.rows.item(i).log?+?"</b></p>";
????????document.querySelector('#status').innerHTML?+=??msg;
????}
},null);
});
删除 记录
我们可以使用下面的语句来 删除 记录
db.transaction(function?(tx)?{
????tx.execute sql ('DELETE?FROM?logs??WHERE?id=1');
});
删除 指定的数据 id 也可以是动态的
db.transaction(function(tx)?{
????tx.execute sql ('DELETE?FROM?logs?WHERE?id=?',[id]);
});
更新记录
我们可以使用下面的语句来更新记录
db.transaction(function?(tx)?{
????tx.execute sql ('UPDATE?logs?SET?log=\'F2er.com\'?WHERE?id=2');
});
更新指定的数据 id 也可以是动态的
db.transaction(function(tx)?{
????tx.execute sql ('UPDATE?logs?SET?log=\'F2er.com\'?WHERE?id=?',[id]);
});
完整范例
var?db?=?openDatabase('ysdb',2?*?1024?*?1024);
var?msg;
?db.transaction(function?(tx)?{
????tx.execute sql ('CREATE?TABLE?IF?NOT?EXISTS?logs?(id?unique,"www.F2er.com")');
????msg?=?'<p>数据表已创建，且插入了两条数据。</p>';
????document.querySelector('#status').innerHTML?=??msg;
?});
?db.transaction(function?(tx)?{
??????tx.execute sql ('DELETE?FROM?logs??WHERE?id=1');
??????msg?=?'<p> 删除 ?id?为?1?的记录。</p>';
??????document.querySelector('#status').innerHTML?=??msg;
?});
?db.transaction(function?(tx)?{
?????tx.execute sql ('UPDATE?logs?SET?log=\'F2er.com\'?WHERE?id=2');
??????msg?=?'<p>更新?id?为?2?的记录。</p>';
??????document.querySelector('#status').innerHTML?=??msg;
?});
?db.transaction(function?(tx)?{
????tx.execute sql ('SELECT?*?FROM?logs',results)?{
???????var?len?=?results.rows.length,i;
???????msg?=?"<p> 查询 记录条数:?"?+?len?+?"</p>";
???????document.querySelector('#status').innerHTML?+=??msg;
???????for?(i?=?0;?i?<?len;?i++){
??????????msg?=?"<p><b>"?+?results.rows.item(i).log?+?"</b></p>";
??????????document.querySelector('#status').innerHTML?+=??msg;
???????}
????},null);
?});
HTML5 应用程序缓存 ? ?HTML5 Web 存储
查看更多关于HTML5 Web SQL 数据库的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did92370