El mejor tutorial de Base de datos SQL Web HTML5 en 2024. En este tutorial podrás aprender métodos de núcleo,Abrir base de datos,Para realizar operaciones de consulta,insertar datos,leer datos,ejemplo completo,eliminar registro,actualizar los registros,ejemplo completo,
Web API de base de datos SQL no es parte de la especificación de HTML 5, pero es una especificación separada, presentó un conjunto de APIs para utilizar la base de datos de clientes operación de SQL.
Si usted es un extremo posterior programador web, debe ser fácil de entender las operaciones de SQL.
También puede hacer referencia a nuestro tutorial de SQL para aprender más de las operaciones de base de datos de conocimiento.
Web Base de datos SQL puede funcionar en la última versión de Safari, Chrome y Opera navegador.
Los siguientes son los tres métodos básicos definidos en la especificación:
Podemos usar método OpenDatabase () para abrir una base de datos existente, si la base de datos no existe, crear una nueva base de datos, utilice el siguiente código:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase () de los cinco parámetros que corresponden a la descripción:
El quinto parámetro, crear una devolución de llamada se llamará después de crear la base de datos.
Ejecución utiliza 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)'); });
La declaración anterior crea una tabla de registros citados en la base de datos "mydb 'después de la ejecución.
Después de ejecutar la instrucción anterior para crear la tabla, 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, "本教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3write.com")'); });
También podemos utilizar un valor dinámico para insertar los 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 (?, ?'), [e_id, e_log]; });
Instancia e_id e_log y las variables externas, parámetro de matriz ExecuteSQL se asigna a cada entrada de "?".
El siguiente ejemplo muestra cómo leer los datos que ya están 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, "本教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3write.com")'); }); db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>查询记录条数: " + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ alert(results.rows.item(i).log ); } }, null); });
<!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, "本教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3write.com")'); msg = '<p>数据表已创建,且插入了两条数据。</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>查询记录条数: " + 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">状态信息</div> </body> </html>
Los ejemplos de los resultados operativos de arriba como se muestra a continuación:
Formato eliminar registros son los siguientes:
db.transaction(function (tx) { tx.executeSql('DELETE FROM LOGS WHERE id=1'); });
Retire la identificación de datos especificado también puede ser dinámico:
db.transaction(function(tx) { tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]); });
actualizar los registros utilizando el siguiente formato:
db.transaction(function (tx) { tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2'); });
Actualiza el identificador de datos especificado también puede ser dinámico:
db.transaction(function(tx) { tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]); });
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <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, "本教程")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3write.com")'); msg = '<p>数据表已创建,且插入了两条数据。</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('DELETE FROM LOGS WHERE id=1'); msg = '<p>删除 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>更新 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>查询记录条数: " + 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">状态信息</div> </body> </html>
Los ejemplos de los resultados operativos de arriba como se muestra a continuación: