Detaillierte Einführung in den lokalen Speicher und die lokale Datenbank von H5

Dieses Mal werde ich Ihnen eine detaillierte Einführung in den lokalen Speicher und die lokale Datenbank geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung des lokalen Speichers und der lokalen Datenbank von H5? Werfen wir einen Blick darauf.

Lokaler Speicher

1.1 Der Hintergrund des Ursprungs des lokalen Speichers

Aufgrund der Einschränkungen der Cookie-Größe, des Formats, des Speicherdatenformats usw. in der HTML4-Ära, wenn eine Website-Anwendung diese browserseitig speichern möchte. Einige Informationen des Benutzers können nur mit Hilfe von Cookies erhalten werden. 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 Permanenter 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 kann direkt bedient werden über dieses Objekt WebStorage auf Sitzungsebene im Browser. 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 beide nur Speicher bereitstellen Die Daten von Einfache Datenstrukturen sind für die Daten komplexer Webanwendungen machtlos. 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.

Schritt 2: Verwenden Sie das im ersten Schritt erstellte Datenbankzugriffsobjekt, um die Transaktionsmethode auszuführen. Mit dieser Methode können Sie eine Ereignisantwortmethode einrichten, um die Transaktion erfolgreich auszuführen Antwortmethode.

Schritt 3: Führen Sie die Abfrage über die Methode „executeSql“ aus. Natürlich kann die Abfrage auch wie folgt lauten: CRUD.

Als nächstes stellen wir die Parameter und die Verwendung der relevanten Methoden vor.

1.4.1 openDatabase-Methode

//Demo: Eine Datenbank abrufen oder erstellen. Wenn die Datenbank nicht vorhanden ist, erstellen Sie sie

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

eine Datenbank erstellen. Die Bedeutung mehrerer Parameter ist:

Rückruffunktion (kann weggelassen werden).

1.4.2 db.transaction方法

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

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

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

相关阅读：

HTML的table鼠标拖拽排序该如何实现

html属于什么文件html的文件该如何打开 

html怎样实现页面跳转时传递参数

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in den lokalen Speicher und die lokale Datenbank von H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!