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.
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("数据库创建成功!"); }
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); }); }); }
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); } ); });
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); } ); }); }
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; };
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); }); }); }
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); }); }); }
5) Supprimer la table de données
this.dropTable = function () { dataBase.transaction(function (tx) { tx.executeSql('drop table stu'); }); }
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!