¿Qué es WEB SQL?

Web SQL es una API de página web para almacenar o administrar los datos en bases de datos que se pueden consultar utilizando una variante de SQL como crear bases de datos, abrir la transacción, crear tablas, insertar valores en las tablas, eliminar valores y leer datos. 

La API Web SQL Database no forma parte de la especificación HTML5, pero es una especificación independiente. Especifica un conjunto de API para manipular las bases de datos del lado del cliente mediante SQL. La base de datos web SQL funciona en la última versión de Safari, Google Chrome, navegadores Android y Opera.

Métodos:

Hay tres métodos básicos como se muestra a continuación:

Crear o abrir una base de datos SQL web:

Podemos usar la función openDatabase para crear una base de datos que tenga cuatro parámetros:

• Nombre de la base de datos
• Número de versión
• Descripción
• Tamaño
• Devolución de llamada de creación.

La devolución de llamada de creación se llama mientras se crea la base de datos.

Utilice el método openDatabase() para acceder a una base de datos. Si la base de datos no existe, el método primero la crea y luego la abre:

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

Podemos crear una base de datos ejecutando la siguiente consulta:

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

Creando transacción:

Podemos usar la función llamada transacción desde nuestra instancia de base de datos.

Sintaxis:

gfgDb.transaction(function (tx){});

Aquí, gfgDb es nuestra instancia de base de datos y tx es el objeto de transacción que usaremos para las próximas operaciones. Si alguna operación arroja un error, la transacción se revertirá . Los registros de errores se pueden administrar fácilmente mediante el uso de transacciones.

Ejecutando consultas:

Para ejecutar una consulta, utiliza la función base de datos.transacción(). Tiene un solo argumento, que ejecuta la consulta de la siguiente manera:

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

El código anterior creará una tabla denominada CLASE en la base de datos ‘gfgDb’.

INSERTAR Operación:

Para crear entradas en la tabla de la siguiente manera: 

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

El segundo argumento para ejecutar Sql asigna datos de campo a la consulta, así:

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

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

Aquí, .id y text son variables externas, y executeSql asigna cada elemento del argumento de array a los «?».

LEER Operación:

Para leer registros ya existentes usamos una devolución de llamada: 

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 = "<p>Found rows: " + len + "</p>"; 
      document.querySelector('#status').innerHTML +=  msg; 
  
      for (i = 0; i < len; i++) { 
         alert(results.rows.item(i).class ); 
      } 
  
   }, null); 
});

La devolución de llamada recibe el objeto de transacción y el objeto de resultados. El objeto de resultados contiene un objeto de filas, tiene una longitud, pero para alcanzar filas individuales, se usa Results.rows.item(i) , donde i es el índice de la fila.

Ejemplo 1:

<!DOCTYPE HTML>  
   
<html>   
   <head>  
     
      <script type = "text/javascript">  
         var gfgDb = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  
         var msg;  
       
         gfgDb.transaction(function (tx) {  
            tx.executeSql('CREATE TABLE IF NOT EXISTS CLA (id unique, class,name)');  
            tx.executeSql('INSERT INTO CLA (id, class,name) VALUES (1, "First","Geeks")');  
            tx.executeSql('INSERT INTO CLA (id, class,name) VALUES (2, "Second","Hazel")'); 
            tx.executeSql('INSERT INTO CLA (id, class,name) VALUES (3, "Third","Ronaldo")'); 
            tx.executeSql('INSERT INTO CLA (id, class,name) VALUES (4, "Fourth","Sachin")'); 
              
            msg = '
 
<p>Class message created and row inserted.</p>
 
';  
            document.querySelector('#status').innerHTML =  msg;  
         }) 
   
         gfgDb.transaction(function (tx) {  
            tx.executeSql('SELECT * FROM CLA', [], 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).class + "</b></p>
 
";  
                  document.querySelector('#status').innerHTML +=  msg;  
               }  
            }, null);  
         });  
      </script>  
   </head>  
     
   <body>  
      <div id = "status" name = "status">Status Message</div>  
   </body>  
</html> 

Producción:

Ejemplo 2:

<!DOCTYPE HTML>  
   
<html>   
   <head>  
     
      <script type = "text/javascript">  
         var gfgDb = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  
         var msg;  
       
         gfgDb.transaction(function (tx) {  
            tx.executeSql('CREATE TABLE IF NOT EXISTS ShopItems (id unique, item_name, price)');  
            tx.executeSql('INSERT INTO ShopItems (id, item_name, price) VALUES (1, "Oats","10")');  
            tx.executeSql('INSERT INTO ShopItems (id, item_name, price) VALUES (2, "Shampoo","70")');  
            msg = '
 
<p>ShopItems message created and row inserted.</p>
 
';  
            document.querySelector('#status').innerHTML =  msg;  
         }) 
   
         gfgDb.transaction(function (tx) {  
            tx.executeSql('SELECT * FROM ShopItems', [], 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).item_name +" "+ results.rows.item(i).price + "</b></p>
 
";  
                  document.querySelector('#status').innerHTML +=  msg;  
               }
            
            }, null);  
         });  
      </script>  
   </head>  
     
   <body>  
      <div id = "status" name = "status">Status Message</div>  
   </body>  
</html> 

Producción: