HTML5 Tutoriel de base

HTML5 API

HTML5 Média

HTML5 Graphique

HTML5 Cache d'application HTML5 Stockage client

HTML 5 Base de données locale

HTML5Base de données Web SQL (html5 Il est très tentant (base de données locale) de découvrir que vous pouvez utiliser des instructions de requête comme pour MySQL pour manipuler la base de données locale, ce qui est assez amusant. Aujourd'hui, nous allons ensemble comprendre HTML 5L'API Web SQL Database : openDatabase, transaction, executeSql.

HTML5 Base de données Web SQL

WebSQL est un module indépendant du frontend, une méthode de stockage Web, nous le voyons souvent pendant le débogage, mais il est rarement utilisé.

Si vous êtes un programmeur backend Web, vous devriez comprendre facilement les opérations SQL.

La base de données Web SQL fonctionne sur les versions les plus récentes de Safari, Chrome et Opera.

Méthodes centrales

Voici les trois méthodes centrales définies dans la norme :

openDatabase : cette méthode utilise une base de données existante ou crée une nouvelle base de données pour créer un objet de base de données.
transaction : cette méthode nous permet de contrôler une transaction et d'exécuter un commit ou un rollback en fonction de cette situation.
executeSql : cette méthode est utilisée pour exécuter des requêtes SQL réelles.

Ouvrir la base de données

Nous pouvons utiliser la méthode openDatabase() pour ouvrir une base de données existante, si la base de données n'existe pas, une nouvelle base de données sera créée, comme suit :

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

Les cinq paramètres correspondants à la méthode openDatabase() :

Nom de la base de données
Numéro de version
Texte de description
Taille de la base de données
Rappel de création

Le cinquième paramètre, le rappel de création sera appelé après la création de la base de données.

Opération de requête

L'exécution de l'opération utilise la fonction 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>

L'instruction ci-dessus exécutée aura lieu dans les & #39;testdb#39; Créer une table nommée LOGS dans la base de données.

Insérer des données

Après l'exécution de l'instruction de création de table ci-dessus, nous pouvons insérer quelques données :

示例

!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, "fr.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, "fr.oldtoolbag.com)#39;);
});
　
db.transaction(function(tx) {
　　　tx.executeSql(#39;SELECT　*　FROM LOGS39; [], function (tx, results) {
　　　　　　var len = results.rows.length, i
　　　　　　msg = "<p>Nombre d'enregistrements de recherche: "　+　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, "fr.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>Nombre d'enregistrements de recherche: "　+　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">Informations d'état</div>
</body>
</html>

Vérifiez et voyez ‹/›

Les résultats des exemples ci-dessus sont illustrés dans l'image suivante :

删除记录

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

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

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

db.transaction(function(tx) {
　　　　tx.executeSql(#39;UPDATE LOGS SET log=#39;fr.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, "fr.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;fr.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>Nombre d'enregistrements de recherche: "　+　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">Informations d'état</div>
</body>
</html>

Vérifiez et voyez ‹/›

Les résultats des exemples ci-dessus sont illustrés dans l'image suivante :

HTML5 Cache d'application HTML5 Stockage client