HTML 5 Web SQL Database Core Trident

L'API de la base de données Web SQL n'est pas réellement incluse dans la spécification HTML 5. Il s'agit d'une spécification indépendante qui introduit un ensemble d'API qui utilise SQL pour faire fonctionner les bases de données clients. En supposant que vous êtes un excellent développeur Web, il ne fait aucun doute que vous connaissez déjà les concepts liés aux SQL et aux bases de données. Si vous n'êtes pas familier avec SQL, continuez à lire. Avant cet article, il est préférable d'apprendre d'abord les tutoriels liés à la SQL.

Les dernières versions de Chrome, Safari et Opera prennent toutes les bases de données Web SQL.

Cet article introduira trois méthodes de base définies dans la spécification:

1. 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.

2. Transaction: Cette méthode nous permet de contrôler la validation de la transaction ou le retour en arrière en fonction de la situation.

3. EXECUTESQL: Cette méthode est utilisée pour exécuter des requêtes SQL réelles.

La méthode OpenDatabase ouvre une base de données existante. Si la base de données n'existe pas, elle peut également créer une base de données. La syntaxe pour créer et ouvrir la base de données est la suivante:

 vardb = openDatabase ('mydb', '1.0', 'testdb', 2 * 1024 * 1024);

La méthode OpenDatabase ci-dessus utilise les cinq paramètres suivants:

1. Nom de la base de données (MyDB)

2. Numéro de version (1.0)

3. Description (Test DB)

4. Taille de la base de données (2 * 1024 * 1024)

5. Créer un rappel

Le dernier, c'est-à-dire le cinquième paramètre, crée un rappel, qui sera appelé lors de la création de la base de données, mais même sans ce paramètre, la base de données peut être créée lors de l'exécution.

Exécutez la requête à l'aide de la fonction Database.Transaction (), qui ne nécessite qu'un seul paramètre, et ce qui suit est une déclaration de requête réelle:

 vardb = openDatabase ('mydb', '1.0', 'testdb', 2 * 1024 * 1024);
 db.transaction (fonction (tx) {
 tx.ExECUTESQL ('CreateTableIfNotexistSLogs (iDunique, log)');
 });

La requête ci-dessus créera une table de journaux dans la base de données MyDB.

Afin d'insérer un nouvel enregistrement dans le tableau, nous avons ajouté une requête SQL simple à l'instruction de requête ci-dessus, et l'instruction modifiée est la suivante:

 vardb = openDatabase ('mydb', '1.0', 'testdb', 2 * 1024 * 1024);
 db.transaction (fonction (tx) {
 tx.ExECUTESQL ('CreateTableIfNotexistSLogs (iDunique, log)');
 tx.ExecutesQl ('insertintologs (id, log) valeurs (1, foobar)');
 tx.ExECUtesQl ('insertintologs (id, log) valeurs (2, logmsg)');
 });

Lors de l'insertion d'un nouvel enregistrement, nous pouvons également transmettre des valeurs dynamiques, telles que:

 vardb = openDatabase ('mydb', '1.0', 'testdb', 2 * 1024 * 1024);
 db.transaction (fonction (tx) {
 tx.ExECUTESQL ('CreateTableIfNotexistSLogs (iDunique, log)');
 tx.ExECUTESQL ('Insertintologs
 (id, log) valeurs (? ,? '), [e_id, e_log];
 });

Ici, E_ID et E_LOG sont des variables externes, exécuter les cartes à chaque élément? dans les paramètres du tableau.

Si vous souhaitez lire l'enregistrement qui existe déjà, nous utilisons un rappel pour capturer le résultat, le code est le suivant:

 vardb = openDatabase ('mydb', '1.0', 'testdb', 2 * 1024 * 1024);
 db.transaction (fonction (tx) {
 tx.ExECUTESQL ('CreateTableIfNotexistSLogs (iDunique, log)');
 tx.ExecutesQl ('insertintologs (id, log) valeurs (1, foobar)');
 tx.ExECUtesQl ('insertintologs (id, log) valeurs (2, logmsg)');
 });
 db.transaction (fonction (tx) {
 tx.ExECUTESQL ('select * fromlogs', [], fonction (tx, résultats) {
 varlen = résultats.Rows.length, i;
 msg = <p> Foundrows: + len + </p>;
 document.QuerySelector ('# status'). InnerHtml + = msg;
 pour (i = 0; i <len; i ++) {
 alert (résultats.Rows.item (i) .log);
 }
 },nul);
 });

Enfin, nous présentons ce qui a été décrit précédemment dans un document complet HTML 5, tout en utilisant un navigateur pour analyser le document HTML 5.

 <! Doctypehtml>
 <html>
 <adal>
 <ScriptType = Text / JavaScript>
 vardb = openDatabase ('mydb', '1.0', 'testdb', 2 * 1024 * 1024);
 varmsg;
 db.transaction (fonction (tx) {
 tx.ExECUTESQL ('CreateTableIfNotexistSLogs (iDunique, log)');
 tx.ExecutesQl ('insertintologs (id, log) valeurs (1, foobar)');
 tx.ExECUtesQl ('insertintologs (id, log) valeurs (2, logmsg)');
 msg = '<p> logMessageCreatedAndrowinserted. </p>';
 document.QuerySelector ('# status'). innerHtml = msg;
 });
 db.transaction (fonction (tx) {
 tx.ExECUTESQL ('select * fromlogs', [], fonction (tx, résultats) {
 varlen = résultats.Rows.length, i;
 msg = <p> Foundrows: + len + </p>;
 document.QuerySelector ('# status'). InnerHtml + = msg;
 pour (i = 0; i <len; i ++) {
 msg = <p> <b> + result.Rows.item (i) .log + </b> </p>;
 document.QuerySelector ('# status'). InnerHtml + = msg;
 }
 },nul);
 });
 </cript>
 </ head>
 <body>
 <divid = statusname = status> statusmessage </div>
 </docy>
 </html>

Vous trouverez ci-dessous le résultat de sortie produit dans la dernière version de Safari ou du navigateur d'opéra.

 LogMessageCreatEdAndrowinserted.
 Foundrows: 2
 foobar
 logmsg