Tutoriel HTML5 Base de données locale HTML 5 (base de données Web SQL)_Compétences du didacticiel HTML5

L'API Web SQL Database ne fait pas réellement partie de la spécification HTML5, mais une spécification distincte. Il manipule la base de données du client via un ensemble d'API. Les navigateurs grand public tels que Safari, Chrome, Firefox et Opera prennent déjà en charge la base de données Web SQL. Les bases de données Web SQL de HTML5 sont en effet très tentantes. Lorsque vous constaterez que vous pouvez utiliser la même instruction de requête qu'une requête MySQL pour faire fonctionner une base de données locale, vous trouverez cette chose très intéressante. Aujourd’hui, découvrons l’API Web SQL Database de HTML 5.

Ce qui suit présentera un par un comment créer et ouvrir une base de données, créer une table, ajouter des données, mettre à jour des données, supprimer des données et supprimer une table.

Introduisez d'abord trois méthodes de base

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 soumission ou l'annulation de la transaction en fonction de la situation.

3.executeSql : Cette méthode est utilisée pour exécuter de vraies requêtes SQL.

Étape 1 : Ouvrir la connexion et créer la base de données

Copier le code

Le code est le suivant :

var dataBase = openDatabase("student", "1.0", "Student Table", 1024 * 1024, function () { });
if ( !dataBase) {
alert("Échec de la création de la base de données !");
} else {
alert("Base de données créée avec succès !");
}

Expliquez-le La méthode openDatabase ouvre une base de données existante et peut également créer une base de données si elle n'existe pas. Les significations de plusieurs paramètres sont :
1, nom de la base de données.
2. Le numéro de version est actuellement 1.0. Laissez-le tranquille et écrivez-le à mort.
3. Description de la base de données.
4. Définissez la taille des données.
5, fonction de rappel (peut être omise).
Créez la base de données lors du premier appel, puis établissez la connexion.
La base de données créée existe localement, et le chemin est le suivant :
C:UsersAdministratorAppDataLocalGoogleChromeUser DataDefaultdatabaseshttp_localhost_4987.
Ce qui est créé est une base de données sqllite. Vous pouvez utiliser SQLiteSpy pour ouvrir le fichier et voir les données qu'il contient. SQLiteSpy est un logiciel vert Vous pouvez le télécharger depuis Baidu ou l'adresse de téléchargement officielle de SQLiteSpy : SQLiteSpy.


Étape 2 : Créer un tableau de données

Copier le code

Le code est le suivant :

this.createTable=function() {
dataBase.transaction( function(tx) {
tx.executeSql(
"créer une table sinon existe stu (id REAL UNIQUE, nom TEXT)",
[],
function(tx,result){ alert('Table Stu créée avec succès'); },
function(tx, erreur){ alert( 'Échec de la création de la table stu :' error.message);
});
}

Expliquez,
exécutez la fonction SQL a quatre paramètres, leurs significations sont :
1) Représente la chaîne de requête et le langage SQL utilisé est SQLite 3.6.19.
2) Les données de chaîne insérées dans la requête là où se trouve le point d'interrogation.
3) Fonction de rappel exécutée en cas de succès. Renvoie deux paramètres : tx et le résultat de l'exécution.
4) Une fonction de rappel exécutée en cas d'échec. Renvoie deux paramètres : tx et message d'erreur d'échec.




Étape 3 : Effectuer la vérification des ajouts, des suppressions et des modifications
1) Ajouter des données :

Copier le codeLe code est le suivant :

this.insert = function () {
dataBase.transaction(function ( tx) {
tx.executeSql(
"insérer dans les valeurs stu (id, nom) (?, ?)",
[id, 'Xu Mingxiang'],
function () { alert ("Données ajoutées avec succès" ); },
function (tx, erreur) { alert('Échec de l'ajout de données : '
} );
});

2) Interroger les données

Copier le code Le code est le suivant :

this .query = function () {

dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { / /Fonction de rappel pour une exécution réussie
//Faites ce que vous voulez faire avec le résultat ici.....
},
function (tx, error) {
alert('Échec de la requête : ' error.message);
} );
});
}



Expliquez-le
La fonction de rappel exécutée avec succès dans le code ci-dessus a un résultat en paramètre.

résultat : l'ensemble de données interrogé. Son type de données est SQLResultSet, tout comme DataTable en C#.
SQLResultSet est défini comme :

Copier le code

Le code est le suivant :

interface SQLResultSet {
attribut en lecture seule long insertId;
attribut en lecture seule longues rowsAffected;
attribut en lecture seule SQLResultSetRowList rows;
};

L'attribut le plus important : les lignes de Le type SQLResultSetRowList est la « ligne » de l’ensemble de données.
rows a deux attributs : length et item.
Alors, récupérez la valeur d'une certaine ligne et colonne du résultat de la requête : result.rows[i].item[fieldname].

3) Mettre à jour les données

Copier le code

Le code est le suivant :

this.update = function (id, name) {
dataBase.transaction(function (tx) {
tx.executeSql(
"update stu set name = ? où id= ?",
[nom, id],
function (tx, résultat) {
},
function (tx, erreur) {
alert('Échec de la mise à jour : ' error.message );
});
});
}

4) Supprimer les données

Copier le code

Le code est le suivant :

this.del = function (id) {
dataBase.transaction(function (tx ) {
tx .executeSql(
"supprimer de stu où id= ?",
[id],
fonction (tx, résultat) {
},
fonction (tx , erreur) {
alert('Échec de la suppression : ' error.message);
});
});
}

5) Supprimer le tableau de données

Copier le code

Le code est le suivant :

ce .dropTable = function () {
dataBase.transaction(function (tx) {
tx.executeSql('drop table stu');
});
}

base de données web sql ajoutée Supprimez et modifiez la démo, cliquez pour télécharger.