如何学习HTML5WebSQL？

学习HTML5WebSQL建议从基础概念开始，逐步深入。本教程提供了完整的HTML5WebSQL入门指南，包含理论讲解和实践代码示例。建议按照教程顺序学习，并通过实际操作加深理解。

HTML5WebSQL有什么实际应用？

HTML5WebSQL在实际开发中有广泛应用。掌握HTML5WebSQL可以帮助您更好地完成HTML5相关的开发任务，提升编程技能和工作效率。

HTML5WebSQL

TensorFlow 2项目进阶实战

白话法律42讲

邱岳的产品实战

Web SQL数据库API实际上不是HTML5规范的一部分，而是一个单独的规范，它引入了一组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);

上面的方法采用以下五个参数-

数据库名称 (Database name)
版本号 (Version number)
文字说明 (Text description)
数据库大小 (Size of database)
创建回调 (callback)

如果正在创建数据库，则将调用创建回调的最后一个参数和第五个参数。但是，如果没有此函数，则仍将即时创建数据库并进行正确版本控制。

执行查询

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