Web SQL数据库API实际上不是HTML5规范的一部分,而是一个单独的规范,它引入了一组API来使用SQL来操作客户端数据库。
无涯教程假设您是一个出色的Web开发人员,如果真是这样,那么无疑需知道SQL和RDBMS概念。如果您仍然想与SQL进行会话,则可以阅读的 SQL教程。
Web SQL数据库将在Safari,Chrome和Opera的最新版本中运行。
将在本教程中介绍的规范中定义了以下三种核心方法-
链接:https://www.learnfk.comhttps://www.learnfk.com/html5/html5-web-sql.html
来源:LearnFk无涯教程网
openDatabase - 此方法使用现有数据库或创建新数据库来创建数据库对象。
transaction - 这种方法使能够控制事务并根据情况执行提交或回滚。
executeSql - 此方法用于执行实际的SQL查询。
openDatabase 方法负责打开数据库(如果已经存在),如果该数据库不存在,则将创建该数据库。
要创建和打开数据库,请使用以下代码-
var db=openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
上面的方法采用以下五个参数-
如果正在创建数据库,则将调用创建回调的最后一个参数和第五个参数。但是,如果没有此函数,则仍将即时创建数据库并进行正确版本控制。
要执行查询,请使用database.transaction()函数。该函数需要一个参数,该参数负责实际执行查询,如下所示:
var db=openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); });
上面的查询将在" mydb"数据库中创建一个名为LOGS的表。
为了在表中创建条目,无涯教程在上面的示例中添加了简单的SQL查询,如下所示:
var db=openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); });
可以在创建输入时传递动态值,如下所示:
var db=openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log]; });
这里的 e_id 和 e_log 是外部变量,executeSql将数组参数中的每个项目都映射到"?"。
要读取现有记录,使用回调来捕获输出,如下所示:
var db=openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); }); db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len=results.rows.length, i; msg="<p>Found rows: " + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i=0; i < len; i++) { alert(results.rows.item(i).log ); } }, null); });
因此,最后将此示例保存在完整的HTML5文档中,如下所示,并尝试在Safari浏览器中运行它。
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var db=openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); var msg; db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); msg='<p>Log message created and row inserted.</p>'; document.querySelector('#status').innerHTML= msg; }) db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len=results.rows.length, i; msg="<p>Found rows: " + 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); }); </script> </head> <body> <div id="status" name="status">Status Message</div> </body> </html>
这将产生以下输出-
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)