HTML 5 Web Base de datos SQL Core Trident

Autor：Eve Cole Fecha de actualización：2025-03-29 22:32:02

La API de la base de datos SQL web no está realmente incluida en la especificación HTML 5. Es una especificación independiente que introduce un conjunto de API que usan SQL para operar bases de datos de clientes. Suponiendo que sea un excelente desarrollador web, no hay duda de que ya está familiarizado con los conceptos relacionados con SQL y bases de datos. Si no está familiarizado con SQL, continúe leyendo. Antes de este artículo, es mejor aprender tutoriales relacionados con SQL primero.

Las últimas versiones de Chrome, Safari y Opera admiten bases de datos web SQL.

Métodos centrales

Este artículo presentará tres métodos centrales definidos en la especificación:

1. OpenDatabase: este método utiliza una base de datos existente o crea una nueva base de datos para crear un objeto de base de datos.

2. Transacción: este método nos permite controlar la confirmación de transacciones o reversiones de acuerdo con la situación.

3. Ejecutesql: este método se utiliza para ejecutar consultas reales de SQL.

Abra la base de datos

El método OpenDatabase abre una base de datos existente. Si la base de datos no existe, también puede crear una base de datos. La sintaxis para crear y abrir la base de datos es la siguiente:

 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);

El método OpenDatabase anterior utiliza los siguientes cinco parámetros:

1. Nombre de la base de datos (MyDB)

2. Número de versión (1.0)

3. Descripción (prueba db)

4. Tamaño de la base de datos (2*1024*1024)

5. Crea una devolución de llamada

El último, es decir, el quinto parámetro, crea una devolución de llamada, que se llamará al crear la base de datos, pero incluso sin este parámetro, la base de datos se puede crear en tiempo de ejecución.

Ejecutar una consulta

Ejecutar consulta utilizando la función database.transaction (), que solo requiere un parámetro, y la siguiente es una declaración de consulta real:

 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (function (tx) {
 tx.executesql ('CreateTableIfNotExistSlogs (Idunique, log)');
 });

La consulta anterior creará una tabla de registros en la base de datos MyDB.

Operación de insertar

Para insertar un nuevo registro en la tabla, agregamos una consulta SQL simple a la instrucción de consulta anterior, y la declaración modificada es la siguiente:

 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (function (tx) {
 tx.executesql ('CreateTableIfNotExistSlogs (Idunique, log)');
 tx.executesql ('InsertIntologs (id, log) valores (1, foobar)');
 tx.executesql ('InsertIntologs (id, log) valores (2, logmsg)');
 });

Al insertar un nuevo registro, también podemos pasar valores dinámicos, como:

 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (function (tx) {
 tx.executesql ('CreateTableIfNotExistSlogs (Idunique, log)');
 tx.executesql ('insertintologs
 (id, log) valores (?,? '), [e_id, e_log];
 });

Aquí E_ID y E_LOG son variables externas, ejecutesql asigna cada elemento a las que En los parámetros de matriz.

Operación de lectura

Si desea leer el registro que ya existe, usamos una devolución de llamada para capturar el resultado, el código es el siguiente:

 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 db.transaction (function (tx) {
 tx.executesql ('CreateTableIfNotExistSlogs (Idunique, log)');
 tx.executesql ('InsertIntologs (id, log) valores (1, foobar)');
 tx.executesql ('InsertIntologs (id, log) valores (2, logmsg)');
 });
 db.transaction (function (tx) {
 tx.executesql ('select*fromlogs', [], function (tx, resultados) {
 varlen = results.rows.length, i;
 msg = <p> FoundRows:+len+</p>;
 document.queryselector ('#status'). innerhtml+= msg;
 para (i = 0; i <len; i ++) {
 alerta (results.rows.Item (i) .log);
 }
 },nulo);
 });

Ejemplo completo

Finalmente, presentamos lo que se describió anteriormente en un documento HTML 5 completo, mientras usamos un navegador para analizar el documento HTML 5.

 <! Doctypehtml>
 <html>
 <Evista>
 <scriptType = text/javaScript>
 vardb = opendatabase ('mydb', '1.0', 'testdb', 2*1024*1024);
 Varmsg;
 db.transaction (function (tx) {
 tx.executesql ('CreateTableIfNotExistSlogs (Idunique, log)');
 tx.executesql ('InsertIntologs (id, log) valores (1, foobar)');
 tx.executesql ('InsertIntologs (id, log) valores (2, logmsg)');
 msg = '<p> logMessageCreateDandRowinSerted. </p>';
 document.queryselector ('#status'). innerhtml = msg;
 });
 db.transaction (function (tx) {
 tx.executesql ('select*fromlogs', [], function (tx, resultados) {
 varlen = results.rows.length, i;
 msg = <p> FoundRows:+len+</p>;
 document.queryselector ('#status'). innerhtml+= msg;
 para (i = 0; i <len; i ++) {
 msg = <p> <b>+results.rows.item (i) .log+</b> </p>;
 document.queryselector ('#status'). innerhtml+= msg;
 }
 },nulo);
 });
 </script>
 </ablo>
 <Body>
 <divid = statusName = status> statusMessage </div>
 </body>
 </html>

A continuación se muestra el resultado de salida producido en la última versión de Safari u Opera Browser.

 LogMessageCreateDandRowinSerted.
 Fundadoras: 2
 foobar
 logmsg