HTML5WebSQL

Base de données HTML5 Web SQL

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 qui utilisent des API SQL pour exploiter les bases de données client.

Si vous êtes un programmeur web backend, il devrait être facile de comprendre les opérations SQL.

Vous pouvez également vous référer à notre tutoriel SQL pour en savoir plus sur les opérations de base de données.

La base de données Web SQL 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 :

openDatabase : Cette méthode Créer un objet de base de données à l'aide d'une base de données existante ou d'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

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

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

Explication des cinq paramètres correspondant à 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
Créer un rappel

Créer un rappel

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

Effectuer une opération de requête

Effectuer une opération à l'aide de la fonction database.transaction() :

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)');
});

Une fois l'instruction ci-dessus exécutée, une table nommée LOGS sera créée dans la base de données 'mydb' .

Insérer des 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', 'Test DB', 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, "php中文网")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
});

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

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)');
tx.executeSql('INSERT INTO LOGS
(id, log) ) VALUES (?, ?'), [e_id, e_log];
});

e_id et e_log dans l'instance sont des variables externes, exécutera SQL mapper le tableau Chaque entrée du paramètre donne "?"

Lire les données

L'exemple suivant montre comment lire des données qui existent déjà dans la base de données :

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)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "php中文网")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
});

db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Requête des enregistrements Nombre d'éléments : " + len + "</p>";
document.querySelector('#status').innerHTML += msg;

for (i = 0; i < len ; i++){
alert(results.rows.item(i).log );
}

}, null);
});

Exemple complet

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
    <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, "php中文网")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
            msg = '<p>数据表已创建，且插入了两条数据。</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>查询记录条数: " + 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">状态信息</div>
</body>
</html>

Résultats en cours d'exécution du programme :

Supprimer les enregistrements

Le format utilisé pour supprimer les enregistrements est le suivant :

db.transaction(function (tx) {
tx.executeSql('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 de l'enregistrement

La mise à jour de l'enregistrement utilise le format 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]);
});

Mettre à jour l'enregistrement

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');
});

Mettre à jour l'identifiant de données spécifié peut également être dynamique de :

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

Instance complète

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
    <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, "php中文网")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
            msg = '<p>数据表已创建，且插入了两条数据。</p>';
            document.querySelector('#status').innerHTML =  msg;
        });
        db.transaction(function (tx) {
            tx.executeSql('DELETE FROM LOGS  WHERE id=1');
            msg = '<p>删除 id 为 1 的记录。</p>';
            document.querySelector('#status').innerHTML =  msg;
        });
        db.transaction(function (tx) {
            tx.executeSql('UPDATE LOGS SET log=\'php.cn\' WHERE id=2');
            msg = '<p>更新 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>查询记录条数: " + 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">状态信息</div>
</body>
</html>

Résultat de l'exécution du programme :

Formation continue

nouveau fichier

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> <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, "php中文网")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")'); msg = '<p>数据表已创建，且插入了两条数据。</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>查询记录条数: " + 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">状态信息</div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

HTML5WebSQL

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]