Latest web development tutorials

HTML5 Web Storage

HTML5 Web Storage, besser als ein Cookie lokalen Speicher.


Was ist HTML5 Web Storage?

Verwenden Sie HTML5 können die Daten durchsuchen lokal auf dem Benutzer gespeichert.

Früher, unter Verwendung von lokalen Speicher Cookies. Aber Web Sicherheit und Speicheranforderungen schneller. Diese Daten werden nicht auf dem Server gespeichert werden, aber die Daten nur für die von dem Benutzer angeforderten Daten auf der Website. Es können auch große Datenmengen zu speichern, ohne die Leistung der Site zu beeinflussen.

Daten als Schlüssel / Wert-Paare existieren, Web-Seite Daten nur gestattet ist, den Web-Zugang zu nutzen.


Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

Hinweis: Internet Explorer 7 und früheren Versionen von IE nicht Web - Shop zu unterstützen.


localstorage und session

Zwei gespeicherten Objekte in der Client-Daten:

  • localstorage - keine Begrenzung Datenzeitspeicherung
  • sessionstorage - Datenspeicherung für eine Sitzung von

Vor dem Web-Speicher verwenden, überprüfen Sie die Browserunterstützung und localsession:

if (typeof (Storage)! == "undefined") { // Ja! Unterstützung localsession Objekte! Einige Code // ..... } sonst { // Es tut uns Leid! Unterstützt keine Online - Shop. }


localstorage-Objekt

Keine Zeitbegrenzung Datenspeicherung localstorage-Objekt. Am nächsten Tag, nach der zweiten Woche oder im nächsten Jahr, sind die Daten noch verfügbar sind.

Beispiele

. Local Nachname = "Smith", dokumentieren getElementById ( "Ergebnis") innerHTML- = "Nachname:" ... + local Nachname;

Versuchen »

Analyse Beispiele:

  • Mit der Taste = "Nachname" und value = "Smith" Create a local Schlüssel / Wert-Paare
  • Retrieval Schlüssel für den "Nachname" Wert und fügt dann id = "Ergebnis" Element in

Tipp: Schlüssel / Wert - Paare werden in der Regel als String gespeichert sind , können Sie je nach Bedarf das Format zu konvertieren.

Das folgende Beispiel zeigt die Anzahl der Benutzer auf eine Schaltfläche klickt auf den String-Wert in einen digitalen Code-Typ zu konvertieren:

Beispiele

wenn (Localstorage. Clickcount) { . Localclick = Number (localclick .) + 1;} sonst { . Localclick = 1;} .. Dokument getElementById ( "Ergebnis" ) innerHTML- = " Sie haben auf die Schaltfläche geklickt" + localclick + "Zeiten.";

Versuchen »


session Objekte

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

Wie zu erstellen und eine session zugreifen ::

Beispiele

wenn (Sessionstorage . Clickcount) { . Sessionclick = Number (sessionclick .) + 1;} sonst { . Sessionclick = 1;} .. Dokument getElementById ( "Ergebnis" ) innerHTML- = " In diesem Gespräch , das Sie auf die Schaltfläche geklickt haben , " + sessionclick + "Zeiten.";

Versuchen »