HTML5 Web Storage

HTML5 Web Storage, eine bessere lokale Speichermethode als Cookies.

Was ist HTML5 Web Storage?

Mit HTML5 können Sie die Browserdaten der Nutzer lokal speichern.

In der Vergangenheit wurde für die lokale Speicherung Cookies verwendet. Aber Web Storage ist sicherer und schneller. Diese Daten werden nicht auf dem Server gespeichert, sondern nur für Daten verwendet, die die Website des Nutzers anfordert. Außerdem können große Datenmengen gespeichert werden, ohne die Leistung der Website zu beeinträchtigen.

Daten werden als Schlüssel/Wert-Paare gespeichert, und auf die Daten einer Webseite kann nur diese Webseite zugreifen und sie verwenden.

Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

Hinweis:Internet Explorer 7 und frühere IE-Versionen unterstützen Web Storage nicht.

localStorage und sessionStorage

Die beiden Objekte zum Speichern von Daten auf der Clientseite sind:

  • localStorage - wird verwendet, um Daten für die gesamte Website über einen langen Zeitraum zu speichern. Die gespeicherten Daten haben keine Ablaufzeit, bis sie manuell entfernt werden.
  • sessionStorage - wird verwendet, um Daten vorübergehend für dasselbe Fenster (oder Tab) zu speichern. Diese Daten werden gelöscht, nachdem das Fenster oder der Tab geschlossen wurde.

Bevor Sie Web Storage verwenden, sollten Sie prüfen, ob der Browser localStorage und sessionStorage unterstützt:

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

localStorage-Objekt

Vom localStorage-Objekt gespeicherte Daten haben kein Zeitlimit. Sie sind am nächsten Tag, in der nächsten Woche oder im nächsten Jahr weiterhin verfügbar.

Beispiel

//Speichern localStorage.setItem("sitename", "Beispiel"); //Suchen document.getElementById("result").innerHTML = "Webseitenname:" + localStorage.getItem("sitename");

Selbst ausprobieren »

Beispielerklärung:

  • Verwendekey="sitename"undvalue="Example", um ein localStorage-Schlüssel/Wert-Paar zu erstellen.
  • Rufe den Wert mit dem Schlüssel "sitename" ab und füge die Daten in das Element mitid="result"ein.

Das obige Beispiel kann auch so geschrieben werden:

//Speichere localStorage.sitename = "Example"; //Finde document.getElementById("result").innerHTML = localStorage.sitename;

Entferne "sitename" aus localStorage:

localStorage.removeItem("sitename");

Ob localStorage oder sessionStorage – die verfügbaren APIs sind dieselben. Die häufig verwendeten sind wie folgt (am Beispiel von localStorage):

  • Daten speichern: localStorage.setItem(key,value);
  • Daten lesen: localStorage.getItem(key);
  • Einzelne Daten löschen: localStorage.removeItem(key);
  • Alle Daten löschen: localStorage.clear();
  • Den Schlüssel an einem bestimmten Index abrufen: localStorage.key(index);

Tipp:Schlüssel/Wert-Paare werden normalerweise als Zeichenketten gespeichert, und Sie können das Format nach Bedarf konvertieren.

Das folgende Beispiel zeigt, wie oft ein Benutzer auf eine Schaltfläche klickt.

Konvertieren Sie die Zeichenkettenwerte im Code in numerische Typen:

Beispiel

if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1; } else { localStorage.clickcount=1; } document.getElementById("result").innerHTML="Sie haben die Schaltfläche" + localStorage.clickcount + "Mal angeklickt";

Selbst ausprobieren »

sessionStorage-Objekt

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

So erstellen Sie eine sessionStorage und greifen darauf zu:

Beispiel

if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="Sie haben in dieser Sitzung die Schaltfläche" + sessionStorage.clickcount + "Mal angeklickt";

Selbst ausprobieren »

Verwenden Sie Web Storage, um ein einfaches Website-Listenprogramm zu entwickeln

Das Website-Listenprogramm implementiert die folgenden Funktionen:

  • Sie können den Websitenamen und die URL eingeben und den Websitenamen als Schlüssel in localStorage speichern;
  • Schlagen Sie die URL anhand des Websitenamens nach;
  • Listen Sie alle aktuell gespeicherten Websites auf;

Der folgende Code wird verwendet, um Daten zu speichern und zu finden:

save()- und find()-Methoden

//Daten speichern function save(){ var siteurl = document.getElementById("siteurl").value; var sitename = document.getElementById("sitename").value; localStorage.setItem(sitename, siteurl); alert("Erfolgreich hinzugefügt"); } //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 + "Die URL ist:" + sitename; }

Das vollständige Beispiel wird wie folgt demonstriert:

Beispiel

<div style="border: 2px dashed #ccc;width:320px;text-align:center;"> <label for="sitename">Website-Name (Schlüssel):</label> <input type="text" id="sitename" name="sitename" class="text"/> <br/> <label for="siteurl">Website-URL (Wert):</label> <input type="text" id="siteurl" name="siteurl"/> <br/> <input type="button" onclick="save()" value="Datensatz hinzufügen"/> <hr/> <label for="search_site">Website-Namen eingeben:</label> <input type="text" id="search_site" name="search_site"/> <input type="button" onclick="find()" value="Website finden"/> <p id="find_result"><br/></p> </div>

Selbst ausprobieren »

Screenshot des Implementierungseffekts:

Das obige Beispiel zeigt nur einfache localStorage-Speicherung und -Abruf; in den meisten Fällen sind die Daten, die wir speichern, komplexer.

Als Nächstes verwenden wirJSON.stringify, um Objektdaten zu speichern,JSON.stringify, was ein Objekt in einen String umwandeln kann.

var site = new Object; ... var str = JSON.stringify(site); //Ein Objekt in einen String umwandeln

Danach verwenden wir dieJSON.parse-Methode, um die Zeichenkette in ein JSON-Objekt umzuwandeln:

var site = JSON.parse(str);

JavaScript-Implementierungscode:

save()- und find()-Methoden

//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); //Objekt in String umwandeln localStorage.setItem(site.keyname,str); alert("Erfolgreich gespeichert"); } //Daten finden 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 + "Der Website-Name ist:" + site.sitename + ", und die URL ist:" + site.siteurl; }

Das vollständige Beispiel lautet wie folgt:

Beispiel

<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">Website-URL:</label> <input type="text" id="siteurl" name="siteurl"/> <br/> <input type="button" onclick="save()" value="Datensatz hinzufügen"/> <hr/> <label for="search_site">Alias (Schlüssel) eingeben:</label> <input type="text" id="search_site" name="search_site"/> <input type="button" onclick="find()" value="Website finden"/> <p id="find_result"><br/></p> </div>

Selbst ausprobieren »

Im Beispiel gibt loadAll alle gespeicherten Daten aus. Sie müssen sicherstellen, dass alle in localStorage gespeicherten Daten im JSON-Format vorliegen, andernfalls löst JSON.parse(str) einen Fehler aus.

Demonstration des Ausgabeergebnisses:

Weitere Erweiterungen