La base de données locale est-elle une nouvelle fonctionnalité de HTML5 ?-Questions et réponses frontales-php.cn

La base de données locale est-elle une nouvelle fonctionnalité de HTML5 ?

青灯夜游

Libérer： 2022-01-23 16:41:18

original

1546 Les gens l'ont consulté

La base de données locale est une nouvelle fonctionnalité de HTML5. HTML5 fournit une prise en charge de base de données côté navigateur, permettant aux développeurs de créer une base de données locale côté navigateur directement via l'API JS, et prend en charge les opérations SQL CRUD standard, ce qui rend les applications Web hors ligne plus pratiques pour stocker des données structurées.

La base de données locale est-elle une nouvelle fonctionnalité de HTML5 ?

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

Bien que HTML5 fournisse déjà de puissants stockage local et sessionStorage, les deux ne peuvent fournir que des données pour stocker des structures de données simples et sont impuissants pour les données d'applications Web complexes. Ce qui est incroyable, c'est que HTML5 fournit une prise en charge de base de données côté navigateur, nous permettant de créer une base de données locale côté navigateur directement via l'API JS, et prend en charge les opérations SQL CRUD standard, ce qui rend les applications Web hors ligne plus pratiques pour stocker des données structurées. . Ensuite, nous présenterons les API pertinentes et l'utilisation des données locales.

Les étapes les plus élémentaires pour faire fonctionner une base de données locale sont :

Étape 1 : méthode openDatabase : créez un objet pour accéder à la base de données.
Étape 2 : utilisez l'objet d'accès à la base de données créé lors de la première étape pour exécuter la méthode de transaction. Grâce à cette méthode, vous pouvez configurer une méthode de réponse à un événement pour démarrer la transaction avec succès. Dans la méthode de réponse à un événement, vous pouvez exécuter SQL.
Étape 3 : Passer La méthode executeSql exécute une requête Bien entendu, la requête peut être : CRUD.

Ensuite, nous présenterons les paramètres et l'utilisation des méthodes pertinentes.

(1) Méthode openDatabase :

//Demo：获取或者创建一个数据库，如果数据库不存在那么创建之
var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });

Copier après la connexion

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. Les significations de plusieurs paramètres sont :

1, nom de la base de données.
2. Le numéro de version de la base de données est actuellement suffisant. Bien entendu, vous n'avez pas besoin de le renseigner.
3.
4. Définissez la taille de la base de données allouée (l'unité est Ko).
5, fonction de rappel (peut être omise).
Créez la base de données lors du premier appel, puis établissez la connexion.

(2) La méthode db.transaction peut définir une fonction de rappel. Cette fonction peut accepter un paramètre qui est l'objet de la transaction que nous avons démarrée. Ensuite, le script SQL peut être exécuté via cet objet, qui peut être combiné avec les étapes suivantes.

(3) Exécutez la requête via la méthode executeSql.

ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

Copier après la connexion

Description du paramètre :

qlQuery : L'instruction SQL qui doit être exécutée spécifiquement, qui peut être créée, sélectionnée, mise à jour, supprimée
value1, value2..] : Un tableau de tous les paramètres utilisés dans le SQL ; , dans executeSql Dans la méthode, remplacez d'abord les paramètres à utiliser dans l'instruction s> par "?", puis placez ces paramètres dans un tableau dans le deuxième paramètre
ataHandler : L'exécution réussie est la fonction de rappel appelée, grâce auquel vous pouvez obtenir l'ensemble des résultats de la requête ;
4, errorHandler : fonction de rappel appelée en cas d'échec de l'exécution

Ce qui suit est un exemple complet, vous pouvez y jeter un œil :

<head>
 <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function initDatabase() {
            var db = getCurrentDb();//初始化数据库
            if(!db) {alert("您的浏览器不支持HTML5本地数据库");return;}
            db.transaction(function (trans) {//启动一个事务，并设置回调函数
                //执行创建表的Sql脚本
                trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)", [], function (trans, result) {
                }, function (trans, message) {//消息的回调函数alert(message);});
            }, function (trans, result) {
            }, function (trans, message) {
            });
        }
        $(function () {//页面加载完成后绑定页面按钮的点击事件
            initDatabase();
            $("#btnSave").click(function () {
                var txtName = $("#txtName").val();
                var txtTitle = $("#txtTitle").val();
                var txtWords = $("#txtWords").val();
                var db = getCurrentDb();
                //执行sql脚本，插入数据
                db.transaction(function (trans) {
                    trans.executeSql("insert into Demo(uName,title,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data) {
                    }, function (ts, message) {
                        alert(message);
                    });
                });
                showAllTheData();
            });
        });
        function getCurrentDb() {
            //打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小
            //如果数据库不存在那么创建之
            var db = openDatabase("myDb", "1.0", "it&#39;s to save demo data!", 1024 * 1024); ;
            return db;
        }
        //显示所有数据库中的数据到页面上去
        function showAllTheData() {
            $("#tblData").empty();
            var db = getCurrentDb();
            db.transaction(function (trans) {
                trans.executeSql("select * from Demo ", [], function (ts, data) {
                    if (data) {
                        for (var i = 0; i < data.rows.length; i++) {
                            appendDataToTable(data.rows.item(i));//获取某行数据的json对象
                        }
                    }
                }, function (ts, message) {alert(message);var tst = message;});
            });
        }
        function appendDataToTable(data) {//将数据展示到表格里面
            //uName,title,words
            var txtName = data.uName;
            var txtTitle = data.title;
            var words = data.words;
            var strHtml = "";
            strHtml += "<tr>";
            strHtml += "<td>"+txtName+"</td>";
            strHtml += "<td>" + txtTitle + "</td>";
            strHtml += "<td>" + words + "</td>";
            strHtml += "</tr>";
            $("#tblData").append(strHtml);
        }
    </script>
</head>
    <body>
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="txtName" id="txtName" required/></td>
            </tr>
               <tr>
                <td>标题：</td>
                <td><input type="text" name="txtTitle" id="txtTitle" required/></td>
            </tr>
            <tr>
                <td>留言：</td>
                <td><input type="text" name="txtWords" id="txtWords" required/></td>
            </tr>
        </table>
        <input type="button" value="保存" id="btnSave"/>
        <hr/>
        <input type="button" value="展示所哟数据" onclick="showAllTheData();"/>
        <table id="tblData">
        </table>
    </body>
</html>

Copier après la connexion

L'effet d'exécution est comme indiqué dans la figure ; :