Übersicht über den Webspeicher und die lokale Datenbank

Vorheriger Artikel: HTML5-Hinweise 2 – Ausführliche Erläuterung der HTML5-Audio-/Video-Tags

Übersicht über den Webspeicher

In HTML5 ist neben dem Canvas-Element noch eine weitere neue Ergänzung sehr wichtig Funktion ist die Web-Storage-Funktion, die Daten lokal auf dem Client speichern kann. Bisher konnten Cookies verwendet werden, um einfache Benutzerinformationen wie Benutzernamen auf dem Client zu speichern

Ich habe herausgefunden, dass die Verwendung von Cookies zur dauerhaften Speicherung von Daten besteht. Einige Fragen.

• Größe: Die Größe von Cookies ist auf 4 KB begrenzt

• Bandbreite: Cookies werden zusammen mit HTTP-Fehlern gesendet, sodass ein Teil des Sendens erfolgt Verschwendete Bandbreite, die von Cookies verwendet wird

• Komplexität: Es ist schwierig, Cookies richtig zu manipulieren.

Als Reaktion auf die oben genannten Probleme hat HTML5 die Funktion zum lokalen Speichern von Daten auf dem Client, dem Web Storage, erneut bereitgestellt.

Web Storage-Funktion.

Wie der Name schon sagt, handelt es sich bei der Web Storage-Funktion um die Funktion zum Speichern von Daten im Web. Die Speicherung erfolgt hier für den lokalen Client. Konkret in zwei Typen unterteilt:

sessionStorage: Daten im Sitzungsobjekt speichern. Unter „Sitzung“ versteht man die Zeit, die vom Betreten der Website bis zum Schließen des Browsers vergeht, wenn ein Benutzer auf einer Website surft, d. h. die Zeit, die der Benutzer mit dem Surfen auf dieser Website verbringt. Über das Sitzungsobjekt können alle Daten gespeichert werden, die in diesem Zeitraum gespeichert werden müssen.

localStorage:

Speichern Sie die Daten auf dem lokalen Hardwaregerät (Festplatte) des Clients. Auch wenn der Browser geschlossen ist, sind die Daten weiterhin vorhanden und werden beim nächsten Öffnen des Browsers weiterhin vorhanden sein Um die Website zu besuchen, können Sie sie weiterhin nutzen. localstorage wird über Schlüssel-Wert-Paare gespeichert.

Für Entwicklungstools verwende ich HBuilder.exe

, um eine neue Test.html-Seite zu erstellen. Der Code lautet wie folgt:

<title></title><meta><script>function saveSessiontorage(id) {var targat = document.getElementById(id);var str = targat.value;
                sessionStorage.setItem("msg", str);
            }function getSessionStorage(id) {var targat = document.getElementById(id);var msg = sessionStorage.getItem("msg");
                targat.innerHTML = msg;
            }function saveLocalStorage(id) {var targat = document.getElementById(id);var str = targat.value;
                localStorage.setItem("msg", str);
            }function getLocalStorage(id) {var targat = document.getElementById(id);var msg = localStorage.getItem("msg");
                targat.innerHTML = msg;
            }</script><p></p><input><input><input><p></p><p>    <input></p><input><input>

Code anzeigen

localStorage

Nach dem Schließen und erneuten Öffnen des Browsers sind die gelesenen Daten immer noch vorhanden existiert, aber sessionStorage Nach dem Schließen des Browsers und dem erneuten Öffnen zum Lesen der Daten verschwindet es. Verwenden Sie es als einfache Datenbank

Verwenden Sie Web Storage als einfache Datenbank. Wenn Sie den Datenabruf lösen und Spalten verwalten können, können Sie Web Storage als Datenbank verwenden.

Erstellen Sie eine neue Register.html-Seite mit dem folgenden Code:

nbsp;html><meta><title></title><script>function addUser () {var data=new Object;
                data.name=document.getElementById("txtName").value;
                data.phone=document.getElementById("txtPhone").value;
                data.address=document.getElementById("txtAddress").value;var str=JSON.stringify(data);
                localStorage.setItem(data.name,str);
                alert("注册成功");
            }function search (txt) {var filed=document.getElementById(txt).value;var str=localStorage.getItem(filed);var data=JSON.parse(str);var result="用户名："+data.name+""+"电话："+data.phone+""+"地址："+data.address
                document.getElementById("txtMsg").innerHTML=result;
            }</script><div>用户名:<input>
</div><div>电话号码:<input>
</div><div>地址:<input>
</div><div><input></div><br><div>用户名：<input><input>
</div><div></div>

Code anzeigen

Lokale HTML5-Datenbank

In HTML5 wurde der Inhalt, der lokal auf dem Client gespeichert werden kann, erheblich erweitert und viele Funktionen wurden hinzugefügt, um Daten ursprünglich zu speichern musste lokal auf dem Client gespeichert werden, wodurch die Leistung von Webanwendungen erheblich verbessert und die Belastung des Servers verringert wurde. Die Nutzung des Webs ist in die Ära der „Client-seitigen Priorität und Server-seitigen Priorität“ zurückgekehrt. . In HTML5 sind zwei lokale Datenbanken integriert, eine ist SQLLite und die andere ist indexedDB.

Verwenden SieexecuteSql, um die Abfrage auszuführen

1.transaction.executeSql(sqlquery,[],dataHandler,errorHandler);2.function dataHandler(transaction,results);
3.function errorHandler(transaction,errmsg);
4.rows.length Ermitteln Sie die Anzahl der Datensätze

Erstellen Sie eine neue SqlTest.html mit dem folgenden Code:

nbsp;html><meta><title></title><script>var db=openDatabase("mydb","1.0","test db",1024*100); //参数分别为：(数据库名称，版本号，描述，大小) 如果数据库不存在则创建//            db.transaction(function(tx) {//                tx.executeSql("")//            })            transaction.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg,TEXT,createtime INTERGER)",[],function(){},function(){});//参数：(sql语句，sql参数数组，执行成功的回调函数，执行失败的回调函数)</script>

HTML5 indexedDB-Datenbank

In HTML5 wird eine neue Datenbank namens „indexedDB“ hinzugefügt, bei der es sich um eine lokal auf dem Client gespeicherte Datenbank handelt Datenbank.

Erstellen Sie eine neue IndexedDBTest.html mit dem folgenden Code:

nbsp;html><meta><title></title><script>//统一IndexedDB在不同浏览器的实现            window.indexedDB = window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;
            window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
            window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange ||window.msIDBKeyRange;                function connDB () {var dbName="indexedDBTest";var dbVersion=1;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
                    dbConnect.onsuccess=function (e) {
                        idb=e.target.result;
                        alert("数据库连接成功！")
                    }
                    dbConnect.onerror=function(e){
                        alert("数据库连接失败！");
                    }
                }</script><input>

Code anzeigen

数据库的版本更新

只是成功链接数据库，我们还不能执行任何数据操作，我们还应该创建相当于关系型数据库中数据表的对象仓库与用于检索数据的索引。

新建versionUpdate.html，代码如下：

nbsp;html><meta><title></title><script>//统一IndexedDB在不同浏览器的实现            window.indexedDB = window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;
            window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
            window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange ||window.msIDBKeyRange;                function VersionUpdate () {var dbName="indexedDBTest";var dbVersion=2;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
                    dbConnect.onsuccess=function (e) {
                        idb=e.target.result;
                        alert("数据库连接成功！")
                    }
                    dbConnect.onerror=function(e){
                        alert("数据库连接失败！");
                    }
                    dbConnect.onupgradeneeded=function(e){
                        idb=e.target.result;var ts=e.target.transaction;var oldVersion=e.oldVersion;var newVersion=e.newVersion;
                        alert("数据库更新成功！旧版本号:"+oldVersion+"------新版本号："+newVersion);
                    }
                }</script><input>

View Code

创建对象仓库

对于创建对象仓库与索引的操作，我们只能在版本更新事务内部进行，因为在indexedDB API中不允许数据库中的对象仓库在同一个版本中发生改变。

新建createStorge.html，代码如下：

nbsp;html><meta><title></title><script>//统一IndexedDB在不同浏览器的实现            window.indexedDB = window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;
            window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
            window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange ||window.msIDBKeyRange;                function CreateStorge () {var dbName="indexedDBTest";var dbVersion=2;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
                    dbConnect.onsuccess=function (e) {
                        idb=e.target.result;
                        alert("数据库连接成功！")
                    }
                    dbConnect.onerror=function(e){
                        alert("数据库连接失败！");
                    }
                    dbConnect.onupgradeneeded=function(e){
                        idb=e.target.result;var name="user";var optionParams={keyPath:"userid",autoIncrement:false};var store=idb.createObjectStore(name,optionParams);
                        alert("对象仓库创建成功!");
                    }
                }</script><input>

View Code

 

Das obige ist der detaillierte Inhalt vonÜbersicht über den Webspeicher und die lokale Datenbank. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!