HTML - Web SQL 数据库

Web SQL 数据库 API 实际上并不是 HTML 规范的一部分，但它是一个单独的规范，它引入了一组 API 来使用 SQL 操作客户端数据库。

我假设你是一个伟大的Web开发人员，如果是这样的话，那么毫无疑问，你会非常了解SQL和RDBMS的概念。如果您仍想与 SQL 进行会话，那么您可以阅读我们的 SQL 教程。

Web SQL 数据库将在最新版本的 Safari、Chrome 和 Opera 中运行。

核心方法

在本教程中，我将介绍的规范中定义了以下三种核心方法：

openDatabase： -此方法使用现有数据库或创建新数据库创建数据库对象。
transaction ：这种方法使我们能够控制事务并根据情况执行提交或回滚。
executeSql ：此方法用于执行实际的SQL查询。

打开数据库

如果数据库已经存在，openDatabase 方法负责打开它，如果它已经不存在，则此方法将创建它。

要创建并打开数据库，请使用以下代码 -


 var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

上述方法取了以下五个参数 -

数据库名称
版本号
文字说明
数据库的大小
创建回调

最后一个和第 5 个参数，如果正在创建数据库，将调用创建回调。但是，如果没有此功能，数据库仍将动态创建并正确进行版本控制。

执行查询

要执行查询，请使用 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 的表。

INSERT操作

为了在表中创建输入，我们在上面的示例中添加了简单的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 将数组参数中的每个项目映射到 “？”s.

READ 操作

为了读取已经存在的记录，我们使用回调来捕获结果，如下所示 -


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); 
});

完整示例

因此，最后，让我们将此示例保留在一个完整的HTML文档中，如下所示，并尝试使用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>

当我们运行上述代码时，它将生成一个由网页上显示的文本组成的输出。

打印本页