什么是WEB SQL？

Web SQL是一种网页 API，用于存储或管理数据库中的数据，可以使用 SQL 的变体进行查询，例如创建数据库、打开事务、创建表、向表中插入值、删除值和读取数据。

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

Web SQL 数据库适用于最新版本的 Safari、Google Chrome、Android 浏览器和 Opera。

方法：

有三种基本方法：

S.No	Method	Explanation
1.	opendatabase	It can be used to create a new database or can create the database object using an existing database.
2.	transaction	It transaction can control a transaction and performing either commit or rollback depending upon the situation.
3.	executeSql	It is used to execute a real SQL query.

创建或打开 Web SQL 数据库：

我们可以使用opendatabase函数创建一个有四个参数的数据库：

数据库名称
版本号
描述
尺寸
创建回调。

创建回调在创建数据库时被调用。

使用openDatabase () 方法访问数据库。如果数据库不存在，该方法首先创建它，然后打开它：

Syntax: var gfgDb = opendatabase(database name, version number, description, size);

我们可以通过运行以下查询来创建数据库：

var gfgDb = opendatabase('mydb', '1.0', 'this is a client side database', 2 * 1024 * 1024);


//to check whether the database is created or not.
        if (!gfgDb) {
            alert('database not created');
        }
        else {
            var version = gfgDb.version;
        }

创建交易：

我们可以从我们的数据库实例中使用名为transaction的函数。

Syntax:
gfgDb.transaction(function (tx) {

            });

这里， gfgDb是我们的数据库实例，tx 是我们将用于即将进行的操作的事务对象。如果任何操作抛出错误，事务将被回滚。使用事务可以轻松管理错误日志。

执行查询：

要执行查询，您使用 database.transaction()函数。它有一个参数，执行查询如下：

var gfgDb = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);   
  
gfgDb.transaction(function (tx) {     
   tx.executeSql('CREATE TABLE IF NOT EXISTS CLASS (id unique, class)');   
});

上面的代码将在 'gfgDb' 数据库中创建一个名为 CLASS 的表。

插入操作：

要按如下方式在表中创建条目 -

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

gfgDb.transaction(function (tx) {  
  tx.executeSql('CREATE TABLE IF NOT EXISTS CLASS (id unique, class)');  
  tx.executeSql('INSERT INTO CLASS (id, class) VALUES (1, "First")');  
  tx.executeSql('INSERT INTO CLASS (id, class) VALUES (2, "Second")');  
});

executeSql的第二个参数将字段数据映射到查询，如下所示：

var id="1";
var text="First";

tx.executeSql('INSERT INTO CLASS (id, text) VALUES (?, ?)', [id, text]);

这里，.id 和 text 是外部变量， executeSql将数组参数中的每个项目映射到“？”。

读取操作：

要读取已经存在的记录，我们使用回调：

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

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS CLASS (id unique, class)');
   tx.executeSql('INSERT INTO CLASS (id, class) VALUES (1, "First")'); 
   tx.executeSql('INSERT INTO CLASS (id, class) VALUES (2, "Second")'); 
});  

db.transaction(function (tx) { 
   tx.executeSql('SELECT * FROM CLASS', [], 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).class ); 
      } 
  
   }, null); 
});

回调接收事务对象和结果对象。结果对象包含一个行对象，它有一个长度，但要到达单个行，将使用results.rows.item(i) ，其中 i 是行的索引。

示例 1：

HTML

   
    
    
      
      
         
      
      
      
      Status Message

HTML

   
    
    
      
      
         
      
      
      
      Status Message

输出：

示例 2：

HTML

   
    
    
      
      
         
      
      
      
      Status Message

输出：