Webspeicher ist eine sehr wichtige Funktion, die von HTML5 eingeführt wird.
Der Webspeicher ist in zwei Typen unterteilt:
Es ist deutlich zu sehen, dass SessionStorage die Daten in der Sitzung speichert, und der Browser ist geschlossen.
Ob SessionStorage oder LocalStorage, die APIs, die verwendet werden können, sind gleich.
Da die oben genannten und der Wert eine Zeichenfolge sein müssen.
Als nächstes entwickeln wir ein einfaches Adressbuch kleiner Programm über Webspeicher, um die Verwendung verwandter APIs zu demonstrieren.
1. Geben Sie die Kontaktperson ein, der Kontakt verfügt über zwei Felder, die Mobiltelefonnummer, und die Mobiltelefonnummer wird als Keystorage als Keystorage verwendet.
2. Finden Sie den Eigentümer gemäß der Mobiltelefonnummer.
3. Listen Sie alle derzeit erhaltenen Kontaktinformationen auf.
Erstellen Sie zunächst eine einfache HTML -Seite wie folgt:
<! ; : </Label> <Eingabe type = text id = mobilephone name = mobilephone/> <br/> <Eingabe type = button onclick = save () value = neuer Datensatz/<hr/> <label für = searc = searc h_phone> Geben Sie die Mobiltelefonnummer ein: </label> <Eingabe type = text id = search_phone name = search_phone/> <Eingabe type = schaltet taste onclick = find () value = suchmaschinenbesitzer/> <p id = find_result> <br </ > </p> </div> <br/> <div id = list> </div> </body> </html>
Die Schnittstelle zeigt Folgendes:
Um die Erhaltung des Kontakts zu erreichen, müssen Sie nur die folgende JS -Methode einfach implementieren:
// Datenfunktion speichern () {var microlephone = document.getElementById (Mobilephone).Um den Gründerbesitzer zu erreichen, wird die folgende JS -Methode implementiert:
// Die Datenfunktion finden () {var search_phone = document.getElementById (Search_phone).Um alle gespeicherten Kontaktinformationen anzuzeigen, müssen Sie wie folgt die Methode LocalStorage.Key (Index) verwenden:
// Alle Objekte extrahieren, die in LocalStorage gespeichert sind, und die Funktion loadAll () {var list = document.getElementById (Liste); <l> <td> Name </td> <td> Handynummer </td> </tr>; i); .ernnerhtml = result;} else {list.innerhtml = Die aktuellen Daten sind leer, beeilen Sie sich, um der Kontaktperson beizutreten;}}Der Effekt ist wie folgt:
Frage: Die obigen Demonstrationen haben nur zwei Felder, Namen und Mobiltelefonnummern. Wird der Webspeicher nicht nur die Zeichenfolge verarbeitet? Zu diesem Zeitpunkt können Sie die String () -Methode von JSON verwenden, um komplexe Objekte in String umzuwandeln und im Webspeicher zu speichern.
Die folgende einfache Demonstration fügt die Kontakte der Attribute des Unternehmens hinzu, um den JS -Code zu speichern:
// Datenfunktion speichern () {var contact = contact.user_name JSON.Stringify (Kontakt); GetElementById (Liste); > <td> <td> <td> Mobiltelefone </td> <td> Company </td> </tr>; LOCALSTORAGE.KEY (I); > <td>+conf tact.company+</td> </tr>;} Ergebnis+= </table>; die Kontaktperson;}}Der Effekt ist wie folgt:
Die oben genannte lokale Speicherung von HTML5 von Xiaobian. Ich hoffe, dass es für alle hilfreich ist. Vielen Dank für Ihre Unterstützung für die VEVB Wulin -Website!