Maison > interface Web > Questions et réponses frontales > Quelle base de données HTML5 utilise-t-il ?

Quelle base de données HTML5 utilise-t-il ?

青灯夜游
Libérer: 2021-05-03 09:05:18
original
3114 Les gens l'ont consulté

HTML5 utilise une base de données Web SQL, qui peut être utilisée pour stocker temporairement des données. L'API Web SQL Database ne fait pas réellement partie de la spécification HTML5, mais une spécification distincte qui utilise un ensemble d'API pour manipuler la base de données du client. Les navigateurs grand public tels que Chrome et Firefox prennent en charge les bases de données Web SQL.

Quelle base de données HTML5 utilise-t-il ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

HTML5 utilise une base de données Web SQL.

Base de données locale HTML 5 (base de données Web SQL)

L'API Web SQL Database ne fait en fait pas partie de la spécification HTML5, mais d'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 crée un objet de base de données en utilisant une base de données existante ou en créant une nouvelle 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.

Première étape : ouvrez la connexion et créez la base de données

var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });if (!dataBase) {
alert("数据库创建失败!");
} else {
alert("数据库创建成功!");
}
Copier après la connexion

Expliquez la méthode openDatabase pour ouvrir une base de données existante. Si la base de données n'existe pas, il peut également créer la base de données. 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_*.
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 une table de données

this.createTable=function() {
dataBase.transaction( function(tx) { 
tx.executeSql("create table if not exists stu (id REAL UNIQUE, name TEXT)", 
[], 
function(tx,result){ alert('创建stu表成功'); }, 
function(tx, error){ alert('创建stu表失败:' + error.message); 
});
});
}
Copier après la connexion

Expliquez que la fonction
executeSql a quatre paramètres, leurs significations sont :

1) Caractères représentant la chaîne de requête, le langage SQL utilisé est SQLite 3.6.19. (Obligatoire)

2) Les données de chaîne insérées dans la requête à l'emplacement du point d'interrogation. (Facultatif)

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. (Facultatif)

4) Une fonction de rappel exécutée en cas d'échec. Renvoie deux paramètres : tx et message d'erreur d'échec. (Facultatif)

Étape 3 : Effectuer l'ajout, la suppression, la modification et la vérification

1) Ajouter des données :

this.insert = function () {
dataBase.transaction(function (tx) {
tx.executeSql("insert into stu (id, name) values(?, ?)",
[id, '徐明祥'],
function () { alert('添加数据成功'); },
function (tx, error) { alert('添加数据失败: ' + error.message); 
} );
});
Copier après la connexion

2) Interroger des données

this.query = function () {
dataBase.transaction(function (tx) {
tx.executeSql("select * from stu", [],
function (tx, result) { //执行成功的回调函数//在这里对result 做你想要做的事情吧...........},
function (tx, error) {
alert('查询失败: ' + error.message);
} );
});
}
Copier après la connexion

Spécial rappel

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 :

interface SQLResultSet {readonly attribute long insertId;readonly attribute long rowsAffected;readonly attribute SQLResultSetRowList rows;
};
Copier après la connexion

L'attribut le plus important : les lignes de type SQLResultSetRowList sont les "lignes" de l'ensemble de données.
rows a deux attributs : length et item.
Alors, récupérez la valeur nommée name dans la première ligne du résultat de la requête : result.rows.item(0).name .

3) Mettre à jour les données

this.update = function (id, name) {
dataBase.transaction(function (tx) {
tx.executeSql("update stu set name = ? where id= ?",
[name, id],
function (tx, result) {
},
function (tx, error) {
alert('更新失败: ' + error.message);
});
});
}
Copier après la connexion

4) Supprimer les données

this.del = function (id) {
dataBase.transaction(function (tx) {
tx.executeSql("delete from stu where id= ?",
[id],
function (tx, result) {
},
function (tx, error) {
alert('删除失败: ' + error.message);
});
});
}
Copier après la connexion

5) Supprimer la table de données

this.dropTable = function () {
dataBase.transaction(function (tx) {
tx.executeSql('drop table stu');
});
}
Copier après la connexion

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal