📌  相关文章
📜  HTML5-Web SQL数据库

📅  最后修改于: 2020-10-23 06:15:38             🧑  作者: Mango

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

我假设您是一名出色的Web开发人员，如果真是这样，那么您无疑会知道SQL和RDBMS概念的。如果您仍然想与SQL进行会话，那么可以阅读我们的SQL Tutorial 。

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

核心方法

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

  • 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的表。

插入操作

为了在表中创建entries，我们在上面的示例中添加了简单的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 = "
Found rows: " + len + "
"; 
      document.querySelector('#status').innerHTML +=  msg; 
  
      for (i = 0; i < len; i++) { 
         alert(results.rows.item(i).log ); 
      } 
  
   }, null); 
});

最后的例子

因此，最后，让我们将此示例保存在完整的HTML5文档中，如下所示，并尝试在Safari浏览器中运行它。

现场演示
 
    
  
    
      
Status Message

这将产生以下结果-