Banco de dados HTML5 Web SQL
Web banco de dados SQL API não faz parte da especificação HTML5, mas é uma especificação separada, introduziu um conjunto de APIs para usar banco de dados cliente operação SQL.
Se você é uma extremidade traseira programador Web, ele deve ser fácil de entender operações SQL.
Você também pode consultar o nosso tutorial SQL para aprender mais operações de banco de dados de conhecimento.
Banco de Dados SQL Web pode trabalhar na versão mais recente do Safari, Chrome e Opera browser.
métodos de núcleo
A seguir estão os três métodos principais definidas na especificação:
- OpenDataBase: Este método utiliza um banco de dados existente ou criar um novo banco de dados de objeto de banco de dados.
- transação: Este método permite-nos controlar uma transação, e com base neste caso confirmação ou anulação.
- ExecuteSql: Este método é usado para realizar a consulta SQL real.
Open Database
Podemos usar o método OpenDatabase () para abrir um banco de dados existente, se o banco de dados não existir, criar um novo banco de dados, use o seguinte código:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
OpenDatabase () método dos cinco parâmetros que correspondem à descrição:
- Nome do banco de dados
- O número de versão
- Descrição de texto
- Tamanho do banco de dados
- Criar uma chamada de retorno
O quinto parâmetro, criar um callback será chamado depois de criar o banco de dados.
Para executar operações de consulta
Execução usa a função 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)'); });
A declaração acima cria uma tabela chamado logs no banco de dados "mydb" após a execução.
inserir dados
Depois de executar a declaração acima para criar a tabela, podemos inserir alguns dados:
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.w3big.com")'); });
Podemos também usar um valor dinâmico para inserir os dados:
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]; });
Instância e_id e_log e variáveis externas, parâmetro de matriz ExecuteSQL é mapeado para cada entrada na "?".
ler dados
O exemplo a seguir demonstra como ler os dados que já estão no banco de dados:
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.w3big.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); });
exemplo completo
<!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.w3big.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>
Exemplos dos resultados operacionais acima como mostrado abaixo:
excluir registro
Formato excluir registros são as seguintes:
db.transaction(function (tx) { tx.executeSql('DELETE FROM LOGS WHERE id=1'); });
Remova a ID de dados especificado pode também ser dinâmico:
db.transaction(function(tx) { tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]); });
Atualizar registros
atualizar registros usando o seguinte formato:
db.transaction(function (tx) { tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2'); });
Atualiza o id de dados especificado pode também ser dinâmico:
db.transaction(function(tx) { tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]); });
exemplo completo
<!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.w3big.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>
Exemplos dos resultados operacionais acima como mostrado abaixo: