Base de données Web SQL HTML5

Statut de Web SQL :L'API Web SQL a été dépréciée et n'est plus recommandée. Les nouvelles normes des navigateurs préfèrent IndexedDB pour le stockage côté client. Web SQL n'est encore pris en charge que dans certains navigateurs plus anciens.

Alternative : Étant donné que l'avenir de Web SQL est incertain et qu'il n'est plus largement pris en charge, il est recommandé de passer à IndexedDB, une API de navigateur moderne qui prend en charge les transactions et le stockage de paires clé-valeur.

L'API Web SQL Database ne fait pas partie de la spécification HTML5, mais c'est une spécification indépendante qui introduit un ensemble d'API permettant d'utiliser SQL pour manipuler des bases de données côté client.

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

Vous pouvez également consulter notreTutoriel SQLpour en savoir plus sur les opérations de base de données.

Web SQL Database fonctionne dans les dernières versions des navigateurs Safari, Chrome et Opera.

Méthodes principales

Voici les trois méthodes principales définies dans la spécification :

  1. openDatabase: Cette méthode crée un objet de base de données à partir d'une base de données existante ou d'une base de données nouvellement créée.
  2. transaction: Cette méthode nous permet de contrôler une transaction et d'effectuer un commit ou un rollback selon la situation.
  3. executeSql: Cette méthode est utilisée pour exécuter de véritables requêtes SQL.

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. Le code d'utilisation est le suivant :

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

Les cinq paramètres de la méthode openDatabase() sont décrits comme suit :

  1. Nom de la base de données
  2. Numéro de version
  3. Texte de description
  4. Taille de la base de données
  5. 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.

Exécuter des opérations de requête

Utilisez la fonction database.transaction() pour exécuter des opérations :

var db = openDatabase('mydb', '1.0', 'Base de données de test', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); });

Après l'exécution de l'instruction ci-dessus, une table nommée LOGS sera créée dans la base de données 'mydb'.

Insertion de données

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

var db = openDatabase('mydb', '1.0', 'Base de données de test', 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, "Example Tutorial")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.com")'); });

Nous pouvons également utiliser des valeurs dynamiques pour insérer des données :

var db = openDatabase('mydb', '1.0', 'Base de données de test', 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]); });

Dans l'exemple, e_id et e_log sont des variables externes. executeSql associe chaque entrée du paramètre de tableau à "?".

Lire les données

L'exemple suivant montre comment lire les données qui se trouvent déjà dans la base de données :

var db = openDatabase('mydb', '1.0', 'Base de données de test', 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, "Example Tutorial")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.com")'); }); db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>Interroger le nombre d'enregistrements :" + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ alert(results.rows.item(i).log ); } }, null); });

Exemple complet

Exemple

var db = openDatabase('mydb', '1.0', 'BD de test', 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, "Example Tutorial")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.com")'); msg = '<p>La table de données a été créée et deux enregistrements ont été insérés.</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>Interroger le nombre d'enregistrements :" + 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); });

Essayez-le vous-même »

Le résultat de l'exécution de l'exemple ci-dessus est présenté dans la figure suivante :

Supprimer des enregistrements

Le format de suppression des enregistrements est le suivant :

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

L'id des données spécifiées à supprimer peut également être dynamique :

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

Mettre à jour les enregistrements

Le format de mise à jour des enregistrements est le suivant :

db.transaction(function (tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});

L'id des données spécifiées à mettre à jour peut également être dynamique :

db.transaction(function(tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});

Exemple complet

Exemple

var db = openDatabase('mydb', '1.0', 'BD de test', 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, "Example Tutorial")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.com")'); msg = '<p>La table de données a été créée et deux enregistrements ont été insérés.</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('DELETE FROM LOGS WHERE id=1'); msg = '<p>Supprimer l'enregistrement avec l'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>Mettre à jour l'enregistrement avec l'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>Interroger le nombre d'enregistrements :" + 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); });

Essayez-le vous-même »

Le résultat de l'exécution de l'exemple ci-dessus est présenté dans la figure suivante :

Autres extensions