Base de données Web SQL HTML5
L'API Web SQL Database ne fait pas partie de la spécification HTML5, mais il s'agit d'une spécification indépendante qui introduit un ensemble d'API pour exploiter les bases de données client à l'aide de SQL.
Supposons que vous soyez un bon développeur Web, si tel est le cas, vous connaîtrez sans aucun doute bien les concepts SQL et SGBDR. Si vous avez encore besoin d'un sujet SQL, consultez nos tutoriels SQL.
Nous pouvons utiliser la base de données Web SQL dans les dernières versions de Safari, Chrome et Opera.
Méthodes de base
Voici les trois méthodes de base définies dans la spécification. Également couvert dans ce tutoriel :
openDatabase : Cette méthode crée un objet de base de données en utilisant une base de données existante ou une nouvelle base de données.
transaction : Cette méthode nous permet de contrôler une transaction et d'effectuer une validation ou une annulation en fonction de cette situation.
executeSql : Cette méthode est utilisée pour exécuter la requête SQL réelle.
Ouvrir la base de données
Si la base de données existe déjà, la méthode openDatabase se charge d'ouvrir la base de données. Si elle n'existe pas, cette méthode la créera.
Utilisez le code suivant pour créer et ouvrir une base de données :
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
La méthode ci-dessus accepte les cinq paramètres suivants :
Nom de la base de données
Numéro de version
Texte de description
Taille de la base de données
Créer un rappel
Le dernier et cinquième paramètre, créez le le rappel sera appelé après la création de la base de données. Cependant, même sans cette fonctionnalité, le runtime créera toujours la base de données et la version correcte.
Exécuter la requête
Vous devez utiliser la fonction database.transaction() pour exécuter la requête. Cette fonction prend un paramètre, qui est une fonction responsable de l'exécution réelle de la requête, comme suit :
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)');
});
L'instruction de requête ci-dessus créera une table appelée LOGS dans la base de données 'mydb'.
Opération d'insertion
Afin de créer une entrée dans la table, nous ajoutons une simple requête SQL à l'exemple ci-dessus comme suit :
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql(' CRÉER UNE TABLE SI N'EXISTE PAS LES JOURNAUX (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql(' INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});
Lors de la création d'une entrée, vous pouvez également transmettre des valeurs dynamiques comme indiqué ci-dessous :
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)'); ];
});
L'e_id et l'e_log ici sont externes variables, executeSql mappera chaque entrée du paramètre du tableau à "?". Opération de lecture
Pour lire un enregistrement déjà existant, nous pouvons utiliser un rappel pour capturer le résultat comme suit :
var db = openDatabase('mydb', '1.0' , 'Test DB', 2 * 1024 * 1024);db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF PAS EXISTE LES JOURNAUX (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")' );
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [] , function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Lignes trouvées : " + len + "</p>";
document.querySelector('#status').innerHTML += msg ;
for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, null);
});
Exemple final
Enfin, mettons cet exemple dans un document HTML5 complet comme indiqué ci-dessous et essayez de l'exécuter dans le navigateur Safari :
<!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, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
msg = '<p>Log message created and row inserted.</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>Found rows: " + 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">Status Message</div>
</body>
</html>Dans la dernière version du navigateur Safari ou Opera, cela générera les résultats suivants :
Message de journal créé et ligne insérée.Lignes trouvées : 2foobar
logmsg
Supprimer les enregistrements
Le format utilisé pour supprimer les enregistrements est le suivant :
db.transaction(function (tx) {
tx.executSql('DELETE FROM LOGS WHERE id=1');
});
La suppression de l'identifiant de données spécifié peut également être dynamique :
db.transaction (function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});
Mise à jour record
Le format utilisé pour mettre à jour les enregistrements est le suivant :
db.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log ='www.w3cschool .cc' WHERE id=2');
});
La mise à jour de l'identifiant de données spécifié peut également être dynamique :
db.transaction( function(tx) {
tx.executeSql('UPDATE LOGS SET log='www.w3cschool.cc' WHERE id=?', [id]);
});
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
