Base de datos Web SQL de HTML5

Estado de Web SQL:La API de Web SQL ha quedado obsoleta y ya no se recomienda su uso. Los nuevos estándares de navegadores prefieren usar IndexedDB para el almacenamiento en el cliente. Web SQL solo es compatible en algunos navegadores antiguos.

Alternativa: Dado que el futuro de Web SQL es incierto y ya no cuenta con un soporte generalizado, se recomienda migrar a IndexedDB, que es una API moderna de navegador compatible con transacciones y almacenamiento de pares clave-valor.

La API de la base de datos Web SQL no forma parte de la especificación HTML5, pero es una especificación independiente que introduce un conjunto de APIs para manipular bases de datos del cliente mediante SQL.

Si eres un programador de backend web, debería ser fácil entender las operaciones SQL.

También puedes consultar nuestroTutorial de SQL, para obtener más información sobre operaciones de bases de datos.

La base de datos Web SQL funciona en las últimas versiones de Safari, Chrome y Opera.

Métodos principales

A continuación se presentan los tres métodos principales definidos en la especificación:

  1. openDatabase: Este método crea un objeto de base de datos utilizando una base de datos existente o una nueva.
  2. transaction: Este método nos permite controlar una transacción y, en ese contexto, realizar una confirmación (commit) o una reversión (rollback).
  3. executeSql: Este método se utiliza para ejecutar consultas SQL reales.

Abrir la base de datos

Podemos usar el método openDatabase() para abrir una base de datos existente; si la base de datos no existe, se creará una nueva. El código es el siguiente:

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

Descripción de los cinco parámetros del método openDatabase():

  1. Nombre de la base de datos
  2. Número de versión
  3. Texto descriptivo
  4. Tamaño de la base de datos
  5. Devolución de llamada de creación

El quinto parámetro, la devolución de llamada de creación, se invoca después de crear la base de datos.

Ejecutar operaciones de consulta

Para ejecutar operaciones se usa la función 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)'); });

Después de ejecutar la sentencia anterior, se creará una tabla llamada LOGS en la base de datos 'mydb'.

Insertar datos

Después de ejecutar la sentencia de creación de tabla anterior, podemos insertar algunos datos:

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, "Tutorial de novatos")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.com")'); });

También podemos insertar datos usando valores dinámicos:

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

En el ejemplo, e_id y e_log son variables externas; executeSql asigna cada elemento del array de parámetros a '?'.

Leer datos

El siguiente ejemplo muestra cómo leer los datos que ya existen en la base de datos:

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, "Tutorial de novatos")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.com")'); }); db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>Consultar el número de registros:" + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ alert(results.rows.item(i).log ); } }, null); });

Ejemplo completo

Ejemplo

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, "Tutorial de novatos")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.com")'); msg = '<p>La tabla de datos se ha creado y se han insertado dos registros.</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>Consultar el número de registros:" + 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); });

Pruébalo »

El resultado de ejecutar el ejemplo anterior se muestra en la siguiente figura:

Eliminar registros

El formato para eliminar registros es el siguiente:

db.transaction(function (tx) {
    tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});

El id de los datos especificado al eliminar también puede ser dinámico:

db.transaction(function(tx) {
    tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});

Actualizar registros

El formato para actualizar registros es el siguiente:

db.transaction(function (tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});

El id de los datos especificado al actualizar también puede ser dinámico:

db.transaction(function(tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});

Ejemplo completo

Ejemplo

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, "Tutorial de novatos")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.com")'); msg = '<p>La tabla de datos se ha creado y se han insertado dos registros.</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('DELETE FROM LOGS WHERE id=1'); msg = '<p>Eliminar el registro con id 1.</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2'); msg = '<p>Actualizar el registro con id 2.</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>Consultar el número de registros:" + 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); });

Pruébalo »

El resultado de ejecutar el ejemplo anterior se muestra en la siguiente figura:

Otras extensiones