English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 Manual Básico

HTML5 API

HTML5 Mídia

HTML5 Gráficos

HTML 5 banco de dados local

HTML5do Web SQL Database (html5 A verdadeira atração do banco de dados local) é quando você descobre que pode usar consultas SQL semelhantes às do MySQL para operar o banco de dados local. Isso é muito interessante. Hoje, vamos entender o HTML 5A API Web SQL Database: openDatabase, transaction, executeSql.

HTML5 Web SQL Database

WebSQL é um módulo independente no frontend e é um tipo de maneira de armazenamento da web. Vemos isso frequentemente durante a depuração, mas geralmente não é usado.

Se você for um programador de back-end da Web, deve ser fácil entender as operações SQL.

A Web SQL Database pode funcionar nas últimas versões do Safari, Chrome e Opera.

Métodos nucleares

Aqui estão os três métodos nucleares definidos no padrão:

  • openDatabase: Este método usa um banco de dados existente ou cria um novo banco de dados para criar um objeto de banco de dados.

  • transaction: Este método nos permite controlar uma transação e executar submissão ou rollback com base nisso.

  • executeSql: Este método é usado para executar consultas SQL reais.

Abertura do banco de dados

Podemos usar o método openDatabase() para abrir um banco de dados existente. Se o banco de dados não existir, um novo banco de dados será criado. O código é o seguinte:

var db = openDatabase(#39;testdb#39;#,39;1.0#39;#,39;Test WebDB#39;,　2　*　1024　*　1024);

Aqui estão as descrições dos cinco parâmetros correspondentes ao método openDatabase():

  • Nome do banco de dados

  • Número da versão

  • Texto de descrição

  • Tamanho do banco de dados

  • Callback de criação

O quinto parâmetro, o callback de criação será chamado após a criação do banco de dados.

Operação de consulta

A execução de operações usa a função database.transaction():

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb#39;#,39;1.0#39;#,39;Test WebDB#39;,　2　*　1024　*　1024);
db.transaction(function(tx) {　　
　　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)#39;);
});
</script>
</body>
</html>

A execução da sentença acima resultará em uma tag de comentário HTML:39;testdb#39; Crie uma tabela chamada LOGS no banco de dados.

Inserção de dados

Após a execução da sentença de criação de tabela acima, podemos inserir alguns dados:

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb#39;#,39;1.0#39;#,39;Test WebDB#39;,　2　*　1024　*　1024);
db.transaction(function(tx) {
　　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)#39;);
　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (1, "基础教程网)#39;);
　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (2, "pt.oldtoolbag.com)#39;);
});
</script>
</body>
</html>

我们也可以使用动态值来插入数据：

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb#39;#,39;1.0#39;#,39;Test WebDB#39;,　2　*　1024　*　1024);
db.transaction(function(tx) {　　
　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)#39;);
　　tx.executeSql(#39;INSERT INTO LOGS (id,log) VALUES (?, ?)#39; [e_id, e_log]);
});
</script>
</body>
</html>

示例中的 e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 "?"。

读取数据

以下示例演示了如何读取数据库中已经存在的数据：

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb#39;#,39;1.0#39;#,39;Test WebDB#39;,　2　*　1024　*　1024);
　
db.transaction(function(tx) {
　　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)#39;);
　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (1, "基础教程网)#39;);
　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (2, "pt.oldtoolbag.com)#39;);
});
　
db.transaction(function(tx) {
　　　tx.executeSql(#39;SELECT　*　FROM LOGS39, [], function (tx, results) {
　　　　　　var len = results.rows.length, i;
　　　　　　msg = "<p>Número de registros consultados: "　+　len　+　"</p>";
　　　　　　document.querySelector('#status').innerHTML;　+= msg;
　　　　
　　　　　　for (i = 0; i < len; i++{
　　　　　　　　　alert(results.rows.item(i).log);
　　　　　　}
　　　　
　　　}, null);
});
</script>
</body>
</html>

完整示例

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb#39;#,39;1.0#39;#,39;Test WebDB#39;,　2　*　1024　*　1024);
var msg;
　
db.transaction(function(tx) {
　　　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)#39;);
　　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (1, "基础教程网)#39;);
　　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (2, "pt.oldtoolbag.com)#39;);
　　　　msg = #39<p>数据表已创建，且插入了两条数据。</p>#39;;
　　　　document.querySelector('#status').innerHTML = msg;
});
　
db.transaction(function(tx) {
tx.executeSql(#39;SELECT　*　FROM LOGS39, [], function (tx, results) {
　　　　var len = results.rows.length, i;
　　　　msg = "<p>Número de registros consultados: "　+　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>
<div id="status" name="status">Informações de Status</div>
</body>
</html>
Teste e veja ‹/›

O resultado da execução dos exemplos acima é mostrado na figura a seguir:

删除记录

删除记录使用的格式如下：

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

删除指定的数据id也可以是动态的：

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

更新记录

更新记录使用的格式如下：

db.transaction(function(tx) {
　　　　tx.executeSql(#39;UPDATE LOGS SET log=#39;pt.oldtoolbag.com#39; WHERE id=2#39;);
});

更新指定的数据id也可以是动态的：

db.transaction(function(tx) {
　　　　tx.executeSql(#39;UPDATE LOGS SET log=#39;pt.oldtoolbag.com#39; WHERE id=?#39; [id]);
});

完整示例

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase(#39;testdb#39;#,39;1.0#39;#,39;Test WebDB#39;,　2　*　1024　*　1024);
var msg;
　
　db.transaction(function(tx) {
　　　　tx.executeSql(#39;CREATE TABLE IF NOT EXISTS LOGS (id unique, log)#39;);
　　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (1, "基础教程网)#39;);
　　　　tx.executeSql(#39;INSERT INTO LOGS (id, log) VALUES (2, "pt.oldtoolbag.com)#39;);
　　　　msg = #39<p>数据表已创建，且插入了两条数据。</p>#39;;
　　　　document.querySelector('#status').innerHTML = msg;
　});
　
　db.transaction(function(tx) {
　　　　　　tx.executeSql(#39;DELETE FROM LOGS WHERE id=1#39;);
　　　　　　msg = #39<p>删除 id 为　1　的记录。</p>#39;;
　　　　　　document.querySelector('#status').innerHTML = msg;
　});
　
　db.transaction(function(tx) {
　　　　　tx.executeSql(#39;UPDATE LOGS SET log=#39;pt.oldtoolbag.com#39; WHERE id=2#39;);
　　　　　　msg = #39<p>更新 id 为　2　的记录。</p>#39;;
　　　　　　document.querySelector('#status').innerHTML = msg;
　});
　
　db.transaction(function(tx) {
　　　　tx.executeSql(#39;SELECT　*　FROM LOGS39, [], function (tx, results) {
　　　　　　　var len = results.rows.length, i;
　　　　　　　msg = "<p>Número de registros consultados: "　+　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>
<div id="status" name="status">Informações de Status</div>
</body>
</html>
Teste e veja ‹/›

O resultado da execução dos exemplos acima é mostrado na figura a seguir:

HTML5 Cache de AplicaçãoHTML5 Armazenamento do Cliente