HTML5 基本教程

HTML5 API

HTML5 Medien

HTML5 Grafik

HTML5 Client-Speicherung

HTML5 Client-Speicherung, eine bessere lokale Speicherart als Cookies. Verwenden Sie HTML5Browsendaten können lokal gespeichert werden.

Was ist HTML5 Web-Client-Speicherung?

Verwendung von HTML5Browsendaten können lokal gespeichert werden.

Früher wurde lokale Speicherung mit Cookies verwendet. Aber Web-Speicherung erfordert mehr Sicherheit und Geschwindigkeit. Diese Daten werden nicht auf dem Server gespeichert, sondern nur für die Anfragen von Website-Daten verwendet. Es kann auch eine große Menge an Daten gespeichert werden, ohne die Leistung der Website zu beeinträchtigen.

Daten werden als Schlüssel gespeichert/Wert-Paar existiert, die Daten auf der Web-Seite sind nur für diese Seite zugänglich.

Browser-Unterstützung

Internet Explorer 8+, Firefox, Opera, Chrome und Safari unterstützen Web-Speicherung.

Beachten Sie: Internet Explorer 7 und frühere IE-Versionen unterstützen keine Web-Speicherung.

localStorage und sessionStorage　

Die beiden Objekte zur Speicherung von Daten auf dem Client sind:

localStorage - Zum langfristigen Speichern von Daten der gesamten Website verwendet, die gespeicherten Daten haben kein Ablaufdatum, bis sie manuell entfernt werden.
sessionStorage - Zum vorübergehenden Speichern von Daten im selben Fenster (oder Tab) verwendet, die nach dem Schließen des Fensters oder Tabs gelöscht werden.

Bevor Web-Speicherung verwendet wird, sollte überprüft werden, ob der Browser localStorage und sessionStorage unterstützt:

Beispiel

if(typeof(Storage)!=="undefined")
{
　　　　//　Ja! localStorage und sessionStorage-Objekte werden unterstützt!
　　　　//　Einige Code.....
} else {
　　　　//　Entschuldigung! Web-Speicherung wird nicht unterstützt.
}

localStorage-Objekt

Die Daten, die im localStorage-Objekt gespeichert werden, haben keine Zeitbegrenzung. Die Daten sind nach dem nächsten Tag, in der nächsten Woche oder im nächsten Jahr immer noch verfügbar.

Beispiel

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial-Website(oldtoolbag.com)</title>　
</head>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
　　localStorage.sitename = "基础教程网";
　　document.getElementById("result").innerHTML = "Webseite Name:";　+　localStorage.sitename;
}
else
{
　　document.getElementById("result").innerHTML="Entschuldigung, Ihr Browser unterstützt keine web-Speicherung.";
}
</script>
</body>
</html>

测试看看 ‹/›

Beispielanalyse:

Erstellen Sie einen localStorage-Schlüssel mit key="sitename" und value="基础教程网"./Wert-Paar.
Suchen Sie den Wert mit dem Schlüssel "sitename" und fügen Sie die Daten in das Element mit id="result" ein.

Der obige Beispiel kann auch so geschrieben werden:

Beispiel

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial-Website(oldtoolbag.com)</title>　
</head>
<body>
<script>
//　Speichern
localStorage.sitename = "基础教程网";
//　Suchen
document.getElementById("result").innerHTML = localStorage.sitename;
</script>
</body>
</html>

测试看看 ‹/›

Entfernen Sie "sitename" aus localStorage:

Beispiel

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial-Website(oldtoolbag.com)</title>　
</head>
<body>
localStorage.removeItem("sitename");
</body>
</html>

测试看看 ‹/›

Sowohl localStorage als auch sessionStorage bieten die gleichen API-Schnittstellen, die häufig verwendeten sind wie folgt (beispielsweise für localStorage):

Daten speichern: localStorage.setItem(key,value);
Daten lesen: localStorage.getItem(key);
Löschen Sie einzelne Daten: localStorage.removeItem(key);
Löschen Sie alle Daten: localStorage.clear();
Erhalten Sie den Wert eines bestimmten Indexes: localStorage.key(index);

Hinweis: Schlüssel/Werte werden normalerweise als Zeichenketten gespeichert, und Sie können das Format nach Bedarf ändern.

Der folgende Beispiel zeigt die Anzahl der Male, dass der Benutzer auf den Button geklickt hat.

Zeichenkettenwerte im Code in numerische Typen umwandeln:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Grundlagen-Tutorial-Website(oldtoolbag.com)</title>　　　　　
<script>
function　clickCounter()
{
　　　　if(typeof(Storage)!=="undefined")
　　　　{
　　　　　　　　if　(localStorage.clickcount)
　　　　　　　　{
　　　　　　　　　　　　localStorage.clickcount=Number(localStorage.clickcount)+1;
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　　　localStorage.clickcount=1;
　　　　　　　　}
　　　　　　　　document.getElementById("result").innerHTML="Sie haben auf den Button geklickt"　+　localStorage.clickcount　+　"次 ";
　　　　}
　　　　else
　　　　{
　　　　　　　　document.getElementById("result").innerHTML="Entschuldigung, Ihr Browser unterstützt keine web-Speicherung.";
　　　　}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>Öffnen Sie die Browser-Registerkarte (oder das Fenster) erneut, und der Zähler wird fortgesetzt (nicht zurückgesetzt).</p>
</body>
</html>

测试看看 ‹/›

sessionStorage-Objekt

Die sessionStorage-Methode speichert Daten für eine Sitzung. Wenn der Benutzer das Browserfenster schließt, werden die Daten gelöscht.

Wie erstellt und angesprochen wird eine sessionStorage:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Grundlagen-Tutorial-Website(oldtoolbag.com)</title>　
<script>
function　clickCounter()
{
　　　　if(typeof(Storage)!=="undefined")
　　　　{
　　　　　　　　if　(sessionStorage.clickcount)
　　　　　　　　{
　　　　　　　　　　　　sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　　　sessionStorage.clickcount=1;
　　　　　　　　}
　　　　　　　　document.getElementById("result").innerHTML="In diesem Dialog haben Sie auf den Button geklickt"　+　sessionStorage.clickcount　+　"次 ";
　　　　}
　　　　else
　　　　{
　　　　　　　　document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 web 存储";
　　　　}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。</p>
</body>
</html>

测试看看 ‹/›

Web Storage 开发一个简单的网站列表程序

网站列表程序实现以下功能：

可以输入网站名，网址，以网站名作为key存入localStorage；
根据网站名，查找网址；
列出当前已保存的所有网站；

以下代码用于保存于查找数据：

save() und find() Methoden

Beispiel

//Daten speichern　　
function save(){　　
　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　var sitename = document.getElementById("sitename").value;　　
　　　　localStorage.setItem(sitename, siteurl);
　　　　alert("添加成功");
}
//Daten suchen　　
function find(){　　
　　　　var search_site = document.getElementById("search_site").value;　　
　　　　var sitename = localStorage.getItem(search_site);　　
　　　　var find_result = document.getElementById("find_result");　　
　　　　find_result.innerHTML = search_site　+　"的网址是："　+　sitename;　　
}

完整示例演示如下：

Beispiel

<!DOCTYPE html>
<html>　　
<head>　　
　　　　<meta charset="utf-8">　　
　　　　<title>HTML5Web-Storage-Local-Speicherung-Serie</title>　　
</head>　　
<body>　　
　　　　<div style="border:　2px dashed #ccc;width:320px;text-align:center;">　　　　　
　　　　　　　　<label for="sitename">网站名(key)：</label>　　
　　　　　　　　<input type="text" id="sitename" name="sitename" class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label for="siteurl">网　址(value)：</label>　　
　　　　　　　　<input type="text" id="siteurl" name="siteurl"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<input type="button" onclick="save()" value="Neue Eintrag hinzufügen"/>}}　　
　　　　　　　　<hr/>}}　　
　　　　　　　　<label for="search_phone">输入网站名：</label>　　
　　　　　　　　<input type="text" id="search_site" name="search_site"/>}}　　
　　　　　　　　<input type="button" onclick="find()" value="Suchen Sie die Website"/>}}　　
　　　　　　　　<p id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>}}　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　//　载入所有存储在localStorage的数据
　　　　loadAll();　　　　　
　　　　　　　　
　　　　//Daten speichern　　
　　　　function save(){　　
　　　　　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　　　　　var sitename = document.getElementById("sitename").value;　　
　　　　　　　　localStorage.setItem(sitename, siteurl);
　　　　　　　　alert("添加成功");
　　　　}
　　　　//Daten suchen　　
　　　　function find(){　　
　　　　　　　　var search_site = document.getElementById("search_site").value;　　
　　　　　　　　var siteurl = localStorage.getItem(search_site);　　
　　　　　　　　var find_result = document.getElementById("find_result");　　
　　　　　　　　find_result.innerHTML = search_site　+　"的网址是："　+　siteurl;　　
　　　　}
　　　　//Ziehen Sie alle in localStorage gespeicherten Objekte extrahieren und auf der Oberfläche darstellen
　　　　function loadAll(){　　
　　　　　　　　var list = document.getElementById("list");　　
　　　　　　　　if(localStorage.length>0){　　
　　　　　　　　　　　　var result = "<table border='1'>";　　
　　　　　　　　　　　　result　+= "<tr><td>key</td><td>value</td></tr>";　　
　　　　　　　　　　　　for(var i=0;i<localStorage.length;i++{　　
　　　　　　　　　　　　　　　　var sitename = localStorage.key(i);　　
　　　　　　　　　　　　　　　　var siteurl = localStorage.getItem(sitename);　　
　　　　　　　　　　　　　　　　result　+= "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";　　
　　　　　　　　　　　　}　　
　　　　　　　　　　　　result　+= "</table>";　　
　　　　　　　　　　　　list.innerHTML = result;　　
　　　　　　　　}　　
　　　　　　　　　　　　list.innerHTML = "Daten sind leer...";　　
　　　　　　　　}　　
　　　　}　　　　　　
　　　　</script>
</body>　　
</html>

测试看看 ‹/›

Screenshot der Implementierungseffekte:

Dieser Beispiel zeigt nur die einfache localStorage-Speicherung und -Suche, in den meisten Fällen sind die gespeicherten Daten komplexer.

Als nächstes verwenden wir JSON.stringify, um die Objekt-Daten zu speichern, JSON.stringify kann ein Objekt in einen String konvertieren.

Beispiel

var site = new Object;
...
var str = JSON.stringify(site);　//　Konvertieren Sie das Objekt in eine Zeichenfolge

Danach verwenden wir das JSON.parse-Methode, um den String in ein JSON-Objekt zu konvertieren:

Beispiel

var site = JSON.parse(str);

JavaScript-Implementierung:

save() und find() Methoden

Beispiel

//Daten speichern　　
function save(){　　
　　　　var site = new Object;
　　　　site.keyname = document.getElementById("keyname").value;
　　　　site.sitename = document.getElementById("sitename").value;　　
　　　　site.siteurl = document.getElementById("siteurl").value;
　　　　var str = JSON.stringify(site);　//　Konvertieren Sie das Objekt in eine Zeichenfolge
　　　　localStorage.setItem(site.keyname, str);　　
　　　　alert("Erfolgreich gespeichert");
}　　
//Daten suchen　　
function find(){　　
　　　　var search_site = document.getElementById("search_site").value;　　
　　　　var str = localStorage.getItem(search_site);　　
　　　　var find_result = document.getElementById("find_result");
　　　　var site = JSON.parse(str);　　
　　　　find_result.innerHTML = search_site　+　的网站名是：　+　site.sitename　+　，网址是：　+　site.siteurl;　　
}

Ein vollständiges Beispiel ist wie folgt:

Beispiel

<!DOCTYPE html>
<html>　　
<head>　　
　　　　<meta charset="utf-8">　　
　　　　<title>HTML5Web-Storage-Local-Speicherung-Serie</title>　　
</head>　　
<body>　　
　　　　<div style="border:　2px dashed #ccc;width:320px;text-align:center;">
　　　　　　　　<label for="keyname">Alias (Schlüssel):</label>　　
　　　　　　　　<input type="text" id="keyname" name="keyname" class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label for="sitename">Website-Name：</label>　　
　　　　　　　　<input type="text" id="sitename" name="sitename" class="text"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<label for="siteurl">Web-Adresse：</label>　　
　　　　　　　　<input type="text" id="siteurl" name="siteurl"/>}}　　
　　　　　　　　<br/>}}　　
　　　　　　　　<input type="button" onclick="save()" value="Neue Eintrag hinzufügen"/>}}　　
　　　　　　　　<hr/>}}　　
　　　　　　　　<label for="search_phone">Geben Sie den Alias (Schlüssel) ein：</label>　　
　　　　　　　　<input type="text" id="search_site" name="search_site"/>}}　　
　　　　　　　　<input type="button" onclick="find()" value="Suchen Sie die Website"/>}}　　
　　　　　　　　<p id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>}}　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　//Daten speichern　　
　　　　function save(){　　
　　　　　　　　var site = new Object;
　　　　　　　　site.keyname = document.getElementById("keyname").value;
　　　　　　　　site.sitename = document.getElementById("sitename").value;　　
　　　　　　　　site.siteurl = document.getElementById("siteurl").value;
　　　　　　　　var str = JSON.stringify(site);　//　Konvertieren Sie das Objekt in eine Zeichenfolge
　　　　　　　　localStorage.setItem(site.keyname, str);　　
　　　　　　　　alert("Erfolgreich gespeichert");
　　　　}　　
　　　　//Daten suchen　　
　　　　function find(){　　
　　　　　　　　var search_site = document.getElementById("search_site").value;　　
　　　　　　　　var str = localStorage.getItem(search_site);　　
　　　　　　　　var find_result = document.getElementById("find_result");
　　　　　　　　var site = JSON.parse(str);　　
　　　　　　　　find_result.innerHTML = search_site　+　的网站名是：　+　site.sitename　+　，网址是：　+　site.siteurl;　　
　　　　}　　
　　　　
　　　　//Ziehen Sie alle in localStorage gespeicherten Objekte extrahieren und auf der Oberfläche darstellen
　　　　//　Stellen Sie sicher, dass der Wert, der mit keyname in der Speicherung gespeichert ist, ein Konversionsobjekt ist, sonst wird JSON.parse einen Fehler ausgeben
　　　　function loadAll(){　　
　　　　　　　　var list = document.getElementById("list");　　
　　　　　　　　if(localStorage.length>0){　　
　　　　　　　　　　　　var result = "<table border='1'>";　　
　　　　　　　　　　　　result　+= "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>";　　
　　　　　　　　　　　　for(var i=0;i<localStorage.length;i++{　
　　　　　　　　　　　　　　　　var keyname = localStorage.key(i);　　
　　　　　　　　　　　　　　　　var str = localStorage.getItem(keyname);　　
　　　　　　　　　　　　　　　　var site = JSON.parse(str);　　
　　　　　　　　　　　　　　　　result　+= "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";　　
　　　　　　　　　　　　}　　
　　　　　　　　　　　　result　+= "</table>";　　
　　　　　　　　　　　　list.innerHTML = result;　　
　　　　　　　　}　　
　　　　　　　　　　　　list.innerHTML = "数据为空...";　　
　　　　　　　　}　　
　　　　}　　
　　　　</script>
</body>　　
</html>

测试看看 ‹/›

示例中的 loadAll 输出了所有存储的数据，你需要确保 localStorage 存储的数据都为 JSON 格式，否则 JSON.parse(str) 将会报错。

输出结果演示：

HTML 5 本地数据库 HTML5 语义元素