Webspeicher ist eine sehr wichtige Funktion, die von HTML5 eingeführt wird. Es kann Daten lokal auf der Clientseite speichern. Es ähnelt HTML4 -Cookies, kann jedoch Funktionen implementieren, die viel leistungsfähiger sind als Cookies. Die Größe des Keks ist auf 4 KB begrenzt. Der Beamte des Webspeichers empfiehlt 5 MB pro Website.
Der Webspeicher ist in zwei Typen unterteilt :SessionStorage
Lokalstor
Aus der wörtlichen Bedeutung ist deutlich zu erkennen, dass SessionStorage Daten in der Sitzung speichert und der Browser geschlossen ist. LocalStorage hält die Daten lokal über den Client.
Unabhängig davon, ob es sich um SessionStorage oder LocalStorage handelt, sind die APIs, die verwendet werden können, gleich. Die häufig verwendeten sind wie folgt (als Beispiel einnehmen Lokalstorage):
Daten speichern: localStorage.setItem (Schlüssel, Wert);
Daten lesen: localStorage.getItem (Schlüssel);
Einzeldaten löschen: localStorage.removeItem (Schlüssel);
Alle Daten löschen: localStorage.clear ();
Holen Sie sich den Schlüssel eines bestimmten Index: LocalStorage.Key (Index);
Wie oben erwähnt, müssen sowohl der Schlüssel als auch der Wert Strings sein. Mit anderen Worten, die Webspeicher -API kann nur Saiten manipulieren.
Als nächstes entwickeln wir ein einfaches Adressbuch -Applet über Webspeicher, um zu demonstrieren, wie verwandte APIs verwendet werden. Wir möchten die folgenden Funktionen implementieren:
Geben Sie die Kontaktperson ein. Die Kontaktperson hat zwei Felder: Name und Handynummer und verwenden die Handynummer als Schlüssel, um sie in LocalStorage zu speichern.
Finden Sie den Eigentümer gemäß der Handynummer.
Listen Sie alle derzeit gespeicherten Kontaktinformationen auf.
Erstellen Sie zunächst eine einfache HTML -Seite wie folgt :<! DocType html>
<html>
<kopf>
<meta charset = "utf-8"/>
<titels> HTML5 Lokaler Speicher -Webspeicherartikel </title>
</head>
<body>
<div style = "Border: 2px gestrichelt #CCC; Breite: 320px; Text-Align: Mitte;">
<Label für = "user_name"> name: </label>
<Eingabe type = "text" id = "user_name" name = "user_name"/>
<br/>
<Label für = "MobilePhone"> Mobiltelefon: </label>
<Eingabe type = "text" id = "mobilephone" name = "mobilephone"/>
<br/>
<Eingabe type = "Taste" Onclick = "Save ()" value = "Record"/>
<hr/>
<Label für = "Search_phone"> Mobiltelefonnummer eingeben: </label>
<Eingabe type = "text" id = "search_phone" name = "search_phone"/>
<Eingabe type = "button" onclick = "find ()" value = "Suchen Sie den Eigentümer"/>
<p id = "find_result"> <br/> </p>
</div>
<br/>
<div id = "list">
</div>
</body>
</html>
Die Schnittstelle wird wie folgt angezeigt :Um Kontakte zu speichern, müssen Sie nur einfach die folgende JS -Methode implementieren:
// Daten speichern
Funktion Save () {
var mobilephone = document.getElementById ("Mobilephone"). Wert;
var user_name = document.getElementById ("user_name"). Wert;
localStorage.setItem (Mobilephone, user_name);
}
Um den Suchbesitzer zu implementieren, wird die folgende JS -Methode implementiert :// Daten finden
Funktion find () {
var search_phone = document.getElementById ("search_phone"). Wert;
var name = localStorage.getItem (search_phone);
var find_result = document.getElementById ("find_result");
Der Eigentümer von find_result.innerhtml = search_phone + "ist:" + name;
}
Um alle gespeicherten Kontaktinformationen anzuzeigen, müssen Sie wie folgt die Methode LocalStorage.Key (Index) verwenden:
// alle in LocalStorage gespeicherten Objekte extrahieren und auf der Schnittstelle anzeigen
Funktion loadAll () {
var list = document.getElementById ("list");
if (localStorage.length> 0) {
var result = "<table border = '1'>";
Ergebnis += "<tr> <td> Name </td> <td> Mobiltelefonnummer </td> </tr>";
für (var i = 0; i <localStorage.length; i ++) {
var mobilephone = localStorage.Key (i);
var name = localStorage.getItem (Mobilephone);
Ergebnis+= "<tr> <td>"+name+"</td> <td>"+Mobilephone+"</td> </tr>";
}
Ergebnis += "</table>";
list.innerhtml = Ergebnis;
}anders{
list.innerhtml = "Die Daten sind derzeit leer, beeilen Sie sich und fügen Sie Kontakte hinzu";
}
}
Die Effekte sind wie folgt:
Frage: Wie oben erwähnt, gibt es nur 2 Felder, Name und Handynummer. Wenn Sie umfangreichere Kontaktinformationen wie Firmenname, Heimatadresse usw. einzahlen möchten, wie können Sie sie erreichen? Kann Webspeicher nicht nur Strings verarbeiten? Zu diesem Zeitpunkt können Sie die Stringify () -Methode von JSON verwenden, um komplexe Objekte in Zeichenfolgen umzuwandeln und im Webspeicher zu speichern. Wenn Sie aus dem Webspeicher gelesen werden, können Sie sie in JSON -Objekte über JSONs Parse () -Methode umwandeln.
Die folgende kurze Demonstration fügt Unternehmensattribute hinzu, um JS -Code zu speichern :// Daten speichern
Funktion Save () {
var contact = neues Objekt;
contact.user_name = document.getElementById ("user_name"). Wert;
contact.mobilephone = document.getElementById ("Mobilephone"). Wert;
contact.company = document.getElementById ("Company"). Wert;
var str = json.Stringify (Kontakt);
localStorage.setItem (contact.mobilephone, str);
loadAll ();
}
// alle in LocalStorage gespeicherten Objekte extrahieren und auf der Schnittstelle anzeigen
Funktion loadAll () {
var list = document.getElementById ("list");
if (localStorage.length> 0) {
var result = "<table border = '1'>";
Ergebnis += "<tr> <td> Name </td> <td> Mobile </td> <td> Unternehmen </td> </tr>";
für (var i = 0; i <localStorage.length; i ++) {
var mobilephone = localStorage.Key (i);
var str = localStorage.getItem (Mobilephone);
var contact = json.Parse (str);
Ergebnis+= "<tr> <td>"+contact.user_name+"</td> <td>"+contact.mobilephone+"</td> <td>"+contact.company+"</td> </tr>";
}
Ergebnis += "</table>";
list.innerhtml = Ergebnis;
}anders{
list.innerhtml = "Die Daten sind derzeit leer, beeilen Sie sich und fügen Sie Kontakte hinzu";
}
}
Die Effekte sind wie folgt: