HTML5 Tutoriales básicos

HTML5 API

HTML5 API de historial

HTML5 Audio (audio)

HTML5 Caché de aplicaciones HTML5 Almacenamiento en el cliente

HTML 5 Base de datos local

HTML5La base de datos Web SQL (html5 La base de datos local) es muy atractiva, cuando descubres que puedes usar sentencias de consulta como las de mysql para operar con la base de datos local, descubrirás que esto es muy interesante. Hoy, vamos a aprender HTML 5La API de Web SQL Database: openDatabase, transaction, executeSql.

HTML5 Base de datos Web SQL

WebSQL es un módulo independiente en el frontend, es un tipo de almacenamiento web, lo vemos a menudo durante la depuración, pero se usa raramente.

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

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

Métodos nucleares

A continuación se presentan los tres métodos nucleares definidos en la norma:

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.
transaction: Este método nos permite controlar una transacción y ejecutar un commit o rollback basado en esa situación.
executeSql: Este método se utiliza para ejecutar consultas SQL reales.

Abrir 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 base de datos, como se muestra en el código siguiente:

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

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

Nombre de la base de datos
Número de versión
Texto de descripción
Tamaño de la base de datos
Callback de creación

El quinto parámetro, el callback de creación se llamará después de crear la base de datos.

Ejecutar operaciones de consulta

Se utiliza la función database.transaction() para ejecutar operaciones:

示例

!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>

Después de ejecutar la sentencia superior, se generará en el & #39;testdb#39; Se crea una tabla llamada LOGS en la base de datos.

Insertar datos

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

示例

!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, "es.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, "es.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 de búsqueda: "　+　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, "es.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 de búsqueda: "　+　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">Información de estado</div>
</body>
</html>

Prueba y mira ‹/›

Los resultados de la ejecución de los ejemplos anteriores se muestran en la siguiente imagen:

删除记录

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

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;es.oldtoolbag.com#39; WHERE id=2#39;);
});

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

db.transaction(function(tx) {
　　　　tx.executeSql(#39;UPDATE LOGS SET log=#39;es.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, "es.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;es.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 de búsqueda: "　+　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">Información de estado</div>
</body>
</html>

Prueba y mira ‹/›

Los resultados de la ejecución de los ejemplos anteriores se muestran en la siguiente imagen:

HTML5 Caché de aplicaciones HTML5 Almacenamiento en el cliente