Entdecken Sie die Tipps zur Verwendung der lokalen HTML5-Speicherfunktion

In diesem Artikel werden hauptsächlich die Anwendungsfähigkeiten der lokalen HTML5-Speicherfunktion vorgestellt. Anhand von Beispielen können Sie Ihr Verständnis der lokalen HTML5-Speicherfunktion vertiefen und sie geschickt anwenden.

Lassen Sie uns eine einfache Anwendung implementieren. In dieser Anwendung gibt der Benutzer den Benutzernamen und die Mobiltelefonnummer ein, und die relevanten Routinen können lokal gespeichert und grundlegende Vorgänge wie Suche und Anzeige ausgeführt werden.

Im Folgenden wird mir nur der Schlüsselcode gegeben. Sie können die Projektstruktur, den Basiscode und den CSS-Stil selbst hinzufügen.

Wir vervollständigen die Verteilung nach Funktionen.

1. Speicherfunktion

Wenn der Benutzer seinen Namen und seine Mobiltelefonnummer eingibt, werden seine Informationen im Webspeicher gespeichert Der HTML-Code lautet wie folgt:

<form>     
     <labelforlabelforlabelforlabelfor=”username”>姓名：</label>     
     <inputtypeinputtypeinputtypeinputtype=”text” id=”username” name=”username” />     
     <labelforlabelforlabelforlabelfor=”mobilephone”>手机号：</label>     
     <input type=”text” id=”mobilephone”name=”mobilephone” />        
     <input type=”button” onclick=”save()”vale=”新增记录” />     
</form>

Der obige Code ist ein Formular. Nachdem der Benutzer den Namen und die Mobiltelefonnummer eingegeben hat, klicken Sie auf Datensatz hinzufügen, um das Schlüssel-Wert-Paar aus Name und Mobiltelefonnummer lokal zu speichern. Der spezifische Speicherfunktionscode in js lautet wie folgt:

function save(){     
     var mobilePhone= document.getElementById(“mobilephone”).value;     
     var userName= dpcument.getElementById(“username”).value;     
     localStorage.setItem(mobilePhone,userName);     
}

Die Logik der Speicherfunktion ist sehr einfach, nämlich den vom Benutzer eingegebenen Wert herauszunehmen und dann die setItem-Funktion von localStorage zu verwenden um die Informationen in Form von Schlüssel-Wert-Paaren im Web Storage Center zu speichern.

2. Suchfunktion

Wenn der Benutzer eine Telefonnummer eingibt, werden die entsprechenden Suchinformationen in der Datenbank angezeigt. Der HTML-Code lautet wie folgt:

<label for=”search”>请输入手机号：</label>     
<input type=”text" id=”search”name=”search” />     
<input type=”button” onclick=”find()”value=”查找”>     
<p id=”result”><p>

Der Ergebnisbereich wird zum Platzieren der Abfrageergebnisse verwendet. Das Folgende ist der relevante Code für die Suchfunktion in js:

function find(){     
     var search =document.getElementById(“search”).value;     
     var name = localStorge.gteItem(search);     
     var result =document.getElementById(“result”);     
     result.innerHTML= search + “:” + name;     
}

Erhalten Sie zuerst die vom Benutzer eingegebene Mobiltelefonnummer und zoomen Sie dann mit getItem hinein, um den Benutzernamen mit dieser Mobiltelefonnummer zu erhalten die Datenbank und zeigen sie schließlich gemeinsam in der Mitte des Ergebnisbereichs an.

Die beiden oben genannten sind die grundlegendsten Funktionen. Wir werden weiterhin die erweiterte Nutzung des lokalen Speichers und die freie Nutzung der lokalen Speicherfunktion in mobilen Anwendungen untersuchen. Weitere verwandte Tutorials finden Sie unter Html5-Video-Tutorial!