Wie H5 lokalen Speicher und lokale Datenbank betreibt

Dieses Mal zeige ich Ihnen, wie H5 den lokalen Speicher und die lokale Datenbank betreibt und welche Vorsichtsmaßnahmen für den Betrieb des lokalen Speichers und der lokalen Datenbank durch H5 gelten. Das Folgende ist ein praktischer Fall , lasst uns gemeinsam einen Blick darauf werfen.

Lokaler Speicher

1.1 Der Hintergrund der Entstehung des lokalen Speichers

Aufgrund der Größe von Cookies im HTML4-Zeitalter, Format, Speicherdatenformat und andere Einschränkungen Wenn eine Website-Anwendung einige Benutzerinformationen auf der Browserseite speichern möchte, kann sie nur Cookies verwenden. Diese Einschränkungen von Cookies führen jedoch dazu, dass Cookies nur einfache Daten wie Identifikatoren wie IDs speichern können.

Die folgenden Cookie-Einschränkungen gelten:

Die meisten Browser unterstützen Cookies bis zu 4096 Byte.

Browser begrenzen auch die Anzahl der Cookies, die eine Website auf dem Computer eines Benutzers speichern kann. Die meisten Browser erlauben nur 20 Cookies pro Website; wenn Sie versuchen, mehr Cookies zu speichern, werden die ältesten Cookies verworfen.

Einige Browser legen auch eine absolute Grenze für die Gesamtzahl der Cookies fest, die sie von allen Websites akzeptieren, normalerweise 300.

Cookies werden standardmäßig zusammen mit HTTP-Anfragen an den Backend-Server gesendet, aber nicht alle Anfragen erfordern Cookies. Beispielsweise sind für Anfragen für JS, CSS, Bilder usw. keine Cookies erforderlich.

Um eine Reihe von Einschränkungen von Cookies zu überwinden, kann HTML5 über die neue API von JS große Datenmengen direkt im Client-Browser speichern und unterstützt komplexe lokale Datenbanken, wodurch JS effizienter wird.

html5 unterstützt zwei Arten von WebStorage:

Permanenter lokaler Speicher (localStorage)

Lokaler Speicher auf Sitzungsebene (sessionStorage)

1.2 Permanent Lokaler Speicher: localStorage

Das localStorage-Objekt wurde zur neuesten JS-API hinzugefügt, um Benutzern das Speichern dauerhaft gespeicherter Webseitendaten zu erleichtern. Darüber hinaus werden die Daten nicht zusammen mit der HTTP-Anfrage an den Backend-Server gesendet, und die Größe der gespeicherten Daten muss grundsätzlich nicht berücksichtigt werden, da der HTML5-Standard eine Unterstützung von mindestens 4 MB durch den Browser erfordert untergräbt die Einschränkungen von Cookies und bietet eine bessere Lösung für das Web. Die Anwendung speichert komplexe Benutzerverfolgungsdaten lokal, um einen sehr bequemen technischen Support zu bieten. Als Nächstes stellen wir die häufig verwendeten Methoden von localStorage vor.

localStorage bietet vier Methoden, die uns bei der Durchführung entsprechender Vorgänge im lokalen Speicher unterstützen.

setItem(key, value) fügt lokale Speicherdaten hinzu. Die beiden Parameter sind sehr einfach und ich werde nicht auf Details eingehen.

getItem(key) ruft den entsprechenden Wert über den Schlüssel ab.

removeItem(key) löscht lokale Daten per Schlüssel.

clear() löscht die Daten.

Der Code lautet wie folgt:

<script type="text/javascript">
    //添加key-value 数据到 sessionStorage
    localStorage.setItem("demokey", "http://www.shiyanlou.com");
    //通过key来获取value
    var dt = localStorage.getItem("demokey");
    alert(dt);
    //清空所有的key-value数据。
    //localStorage.clear();
    alert(localStorage.length);
</script>

1.3 Lokaler Speicher auf Sitzungsebene: sessionStorage

Ein Js-Objekt wird in HTML5 hinzugefügt: sessionStorage ; übergeben Dieses Objekt kann direkt auf im Browser gespeichertem WebStorage auf Sitzungsebene arbeiten. Die im sessionStorage gespeicherten Daten liegen zunächst in Form eines Schlüsselwerts vor. Darüber hinaus beziehen sie sich auf die aktuelle Sitzung des Browsers. Wenn die Sitzung endet, werden die Daten automatisch gelöscht, ähnlich wie bei einem Cookie ohne festgelegte Ablaufzeit .

sessionStorage bietet vier Methoden, die uns bei der Durchführung verwandter Vorgänge im lokalen Speicher unterstützen.

setItem(key, value) fügt lokale Speicherdaten hinzu. Die beiden Parameter sind sehr einfach und ich werde nicht auf Details eingehen.

getItem(key) ruft den entsprechenden Wert über den Schlüssel ab.

removeItem(key) löscht lokale Daten per Schlüssel.

clear() löscht die Daten.

Der Code lautet wie folgt:

<script type="text/javascript">
    //添加key-value 数据到 sessionStorage
    sessionStorage.setItem("demokey", "http://blog.itjeek.com");
    //通过key来获取value
    var dt = sessionStorage.getItem("demokey");
    alert(dt);
    //清空所有的key-value数据。
    //sessionStorage.clear();
    alert(sessionStorage.length);
</script>

1.4 Leistungsstarke lokale Daten

Obwohl HTML5 bereits leistungsstarken LocalStorage und SessionStorage bereitstellt, können sie beide Stellt nur Daten zum Speichern einfacher Datenstrukturen bereit, kann aber nichts für komplexe Webanwendungsdaten tun. Das Erstaunliche ist, dass HTML5 eine browserseitige Datenbankunterstützung bietet, die es uns ermöglicht, eine lokale Datenbank auf der Browserseite direkt über die JS-API zu erstellen, und Standard-SQL-CRUD-Operationen unterstützt, was das Speichern strukturierter Daten in Offline-Webanwendungen erleichtert. Als Nächstes stellen wir die relevanten APIs und die Verwendung lokaler Daten vor.

Die grundlegendsten Schritte zum Betreiben einer lokalen Datenbank sind:

Schritt eins: openDatabase-Methode: Erstellen Sie ein Objekt, um auf die Datenbank zuzugreifen.

第二步：使用第一步创建的数据库访问对象来执行transaction方法，通过此方法可以设置一个开启事务成功的事件响应方法，在事件响应方法中可以执行SQL.

第三步：通过executeSql方法执行查询，当然查询可以是：CRUD。

接下来分别介绍一下相关的方法的参数和用法。

1.4.1 openDatabase方法

//Demo：获取或者创建一个数据库，如果数据库不存在那么创建之

var dataBase = openDatabase(“student”, “1.0”, “学生表”, 1024 * 1024, function () { });

openDatabase方法打开一个已经存在的数据库，如果数据库不存在，它还可以创建数据库。几个参数意义分别是：

数据库名称。

数据库的版本号，目前来说传个1.0就可以了，当然可以不填；

对数据库的描述。

设置分配的数据库的大小（单位是kb）。

回调函数(可省略)。

初次调用时创建数据库，以后就是建立连接了。

1.4.2 db.transaction方法

可以设置一个回调函数，此函数可以接受一个参数就是我们开启的事务的对象。然后通过此对象可以执行SQL脚本。

1.4.3 executeSql方法执行查询
 

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

参数说明：

qlQuery：需要具体执行的sql语句，可以是create、select、update、delete;

[value1,value2..]：sql语句中所有使用到的参数的数组，在executeSql方法中，将s>语句中所要使用的参数先用“?”代替，然后依次将这些参数组成数组放在第二个参数中;

dataHandler：执行成功时调用的回调函数，通过该函数可以获得查询结果集;

errorHandler：执行失败时调用的回调函数;

1.5 综合实例

<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'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>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

H5怎么操作WebSQL数据库

Drag事件编辑器实现拖拽上传图片效果

Das obige ist der detaillierte Inhalt vonWie H5 lokalen Speicher und lokale Datenbank betreibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!