HTML5-Leitfaden-5. Verwenden Sie den Webspeicher zum Speichern von Schlüssel-Wert-Paaren. data_html5-Tutorial-Tipps

Der Inhalt dieser Lektion besteht darin, den Webspeicher vorzustellen, der zum Speichern von Schlüssel-Wert-Paardaten im Browser verwendet wird. Er funktioniert wie die vorherigen Cookies, ist jedoch besser und kann größere Daten speichern. Es gibt zwei Arten von Webspeicher: lokaler Speicher und Sitzungsspeicher. Sie verwenden denselben Implementierungsmechanismus, haben jedoch unterschiedliche Sichtbarkeit und Lebenszyklen.
1. Lokalen Speicher verwenden
Wir verwenden das localStorage-Objekt, um auf den lokalen Speicher zuzugreifen. Es gibt die folgenden Eigenschaften zurück Methoden:
clear(): Die gespeicherten Schlüssel-Wert-Paardaten löschen.
getItem(): Den Wert über key abrufen.
key(): Den Schlüsselwert abrufen durch index;
length: Gibt die Anzahl der Schlüssel-Wert-Paare zurück
removeItem(): Entfernt die angegebenen Daten nach key; : Fügt ein Schlüssel-Wert-Paar hinzu. Wenn das Schlüssel-Wert-Paar des angegebenen Schlüssels vorhanden ist, wird der Aktualisierungsvorgang implementiert.
[]: Verwenden Sie den Schlüssel, um den angegebenen Wert durch Array-Subskription zu erhalten.
Mit dem Speicherobjekt können wir Schlüssel-Wert-Paardaten in Form von Zeichenfolgen speichern. Der Schlüssel ist eindeutig. Wenn wir also die setItem-Methode verwenden, um ein Schlüssel-Wert-Paar hinzuzufügen, ist dieser Schlüsselwert bereits vorhanden wird aktualisiert. Schauen wir uns das folgende Beispiel an:

Kopieren Sie den CodeDer Code lautet wie folgt:

< !DOCTYPE> : left;}
table{border-collapse: collaps;margin-left: 50px;}
th, td{padding: 4px;}
th{text-align: right;}
input {border: Thin Solid Black;padding: 2px;}
label{min-width: 50px;display: inline-block;text-align: right;}
#countmsg, #buttons{margin-left: 50px ;margin-top : 5px;margin-bottom: 5px;}

;
Key:

;Wert:< ;/label>

="add" >Add
Clear Es gibt items

>
Item Count: <script> ; i ) { <br>buttons[i].onclick = handleButtonPress; <br>} <br>function handleButtonPress(e) { <br>switch (e.target.id) { <br>case 'add': <br>var key = document.getElementById('key').value; <br>var value = document.getElementById('value').value; <br>localStorage.setItem(key, value); <br>case 'clear': <br>localStorage.clear(); <br>break; <br>} <br>displayData() { <br>var tableElement = document.getElementById('data'); <br>tableElement.innerHTML = ''; <br>var itemCount = localStorage.length; (var i = 0; i < itemCount; i ) { <br />var key = localStorage.key(i); <br />var val = localStorage.getItem(key); <br />tableElement.innerHTML = '< tr><th>' key '</th><td>' val '</td></tr>'; <br>&lt ;/body> <br></html><br><strong>Werfen wir einen Blick auf die Laufergebnisse</strong>: <br> <p><img alt="" src="http://files.jb51.net/file_images/article/201301/201301071600355.png"></p> <br>Der Browser kann die Daten, die wir über localStorage erstellt haben, nicht löschen, es sei denn, der Benutzer löscht sie. <br><strong>2. Speicherereignisse abhören </strong> <br>Über den lokalen Speicher gespeicherte Daten sind für Dokumente aus derselben Quelle sichtbar. Wenn Sie beispielsweise zwei Chrome-Browser öffnen, um auf dieselbe URL-Adresse zuzugreifen Seite Der auf der Seite erstellte lokale Speicher ist auch für eine andere Seite sichtbar. Wenn Sie jedoch einen anderen Browser (z. B. Firefox) verwenden, um dieselbe URL-Adresse zu öffnen, ist der lokale Speicher nicht sichtbar, da sie unterschiedliche Quellen haben. Das Storage-Ereignis wird verwendet, um Änderungen im Speicherinhalt zu überwachen: <br>key: Gibt den geänderten Schlüsselwert zurück; <br>oldValue: Gibt den Wert zurück, bevor der Schlüsselwert geändert wurde; : Gibt den neuen Wert des geänderten Schlüsselwerts zurück; <br>url: Die geänderte URL-Adresse; <br>storageArea: Gibt das geänderte Speicherobjekt zurück (unabhängig davon, ob es sich um einen lokalen Speicher oder einen Sitzungsspeicher handelt). <br>Sehen wir uns unten ein Beispiel an: <br><br><br><div class="msgheader"><div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode116'));">Kopieren Sie den Code<u></u></span>Der Code lautet wie folgt:</div></div> <div class="msgborder" id="phpcode116"> <!DOCTYPE HTML> <br><head> <br><style> -collapse:collapse; } <br>th, td{padding: 4px;} <br></head> data" border=" 1"> <br><tr> <br><th>key</th> <br><th>oldValue</th> <br><th>newValue</ th> <br> <th>storageArea</th> 🎜>var tableElement = document.getElementById('data'); <br>window.onstorage = function (e) { <br>var row = '<tr>'; e.key '</td>'; <br>row = '</td>' /td>'; <br>row = '<td>' <br>row = '<td>' td></ tr>'; <br>tableElement.innerHTML = row <br>} <br></script> 🎜>
Die Daten, die wir in Beispiel 1 hinzugefügt, gelöscht und geändert haben, werden auf der Seite Beispiel 2 angezeigt. Beispiel 2 läuft normal im Chrome-Browser, aber Firefox reagiert nicht. Andere Browser wurden nicht getestet.

Laufergebnis
:




3. Sitzungsspeicher verwenden
Sitzungsspeicher wird genauso verwendet wie lokaler Speicher, mit der Ausnahme, dass der Zugriff auf die aktuelle Seite beschränkt ist und nach dem Schließen der Seite verschwindet. Wir greifen über sessionStorage darauf zu.





Code kopieren

Der Code lautet wie folgt:

Key:

Wert:

Hinzufügen
Löschen

Es gibt items

Artikelanzahl:	-

<script> <br>displayData(); <br>var Buttons = document.getElementsByTagName("button"); <br>for (var i = 0; i < Buttons.length; i ) { <br>buttons[i].onclick = handleButtonPress; <br>} <br>function handleButtonPress(e) { <br>switch (e.target.id) { <br>case 'add': <br>var key = document.getElementById("key").value; <br>var value = document.getElementById("value").value; <br>sessionStorage.setItem(key, value); <br>Pause; <br>case 'clear': <br>sessionStorage.clear(); <br>Pause; <br>} <br>displayData(); <br>} <br>function displayData() { <br>var tableElement = document.getElementById('data'); <br>tableElement.innerHTML = ''; <br>var itemCount = sessionStorage.length; <br>document.getElementById('count').innerHTML = itemCount; <br>for (var i = 0; i < itemCount; i ) { <br>var key = sessionStorage.key(i); <br>var val = sessionStorage.getItem(key); <br>tableElement.innerHTML = "<tr><th>" Schlüssel „:</th><td>“ val "</td></tr>"; <br>} <br>} <br></script>

运行效果:

你在例3中做任何修改,例2的页面不会发生任何改变。
总结：　
sessionStorage用于本地存储一个会话（Sitzung）中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的.
web storage和cookie的区别:Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的.Cookie-Dateien是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽，另外Cookie还需要指定作用域, 不可以跨域调用。除此之外，Web Storage Die Funktion „setItem, getItem, removeItem, clear“ wird verwendet, um die Verwendung von „cookie“ und „setCookie, getCookie“ anzuzeigen立的存储空间，各个存储空间是完全独立的
但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互, 作为HTTP规范的一部分而存在,而Web Storage仅仅是为了在本地„存储“数据而生。
源码下载