Detailliertes Verständnis des sessionStorage-Objekts in HTML5

Der Inhalt dieses Artikels ist ein tiefgreifendes Verständnis des sessionStorage-Objekts von HTML5. Jetzt kann ich es mit Ihnen teilen.

HTML5 sessionStorage session Storage

sessionStorage ist ein neues Sitzungsspeicherobjekt in HTML5, das zum vorübergehenden Speichern der Daten desselben Fensters (oder Tabs) verwendet wird. Die Daten werden nach dem Schließen des Fensters gelöscht oder Tab. In diesem Artikel wird hauptsächlich die Verwendung von sessionStorage (Sitzungsspeicher) vorgestellt. Einschließlich Vorgänge wie Hinzufügen, Ändern und Löschen.

Inhalt

1. Einleitung

1.1 Beschreibung

1.2 Funktionen

1.3 Browser-Mindestversionsunterstützung

1.4 Geeignet für Szenarien

2. Mitglieder

2.1 Eigenschaften

2.2 Methoden

3. Beispiele

3.1 Speicherdaten

　3.2 Daten lesen

　3.3 Json-Objekt speichern

1. Einführung

1.1 Beschreibung

sessionStorage ist neu in HTML5 A Sitzungsspeicherobjekt, das zum vorübergehenden Speichern der Daten desselben Fensters (oder Tabs) verwendet wird. Die Daten werden nach dem Schließen des Fensters oder Tabs gelöscht.

Dieses Objekt kann über window.sessionStorage oder sessionStorage in der JavaScript-Sprache aufgerufen werden.

1.2 Funktionen

1) Richtlinieneinschränkungen bei gleicher Herkunft. Wenn Sie denselben SessionStorage zwischen verschiedenen Seiten betreiben möchten, müssen diese Seiten unter demselben Protokoll, demselben Hostnamen und demselben Port stehen. (IE 8 und 9 speichern Daten nur auf der Grundlage desselben Hostnamens und ignorieren die Protokoll- (HTTP und HTTPS) und Portnummernanforderungen.)

2) Beschränkung auf eine einzige Registerkarte. Der sessionStorage-Vorgang ist auf eine einzelne Registerkarte beschränkt, und sessionStorage-Daten können gemeinsam genutzt werden, indem auf dieser Registerkarte auf die Seite desselben Ursprungs zugegriffen wird.

3) Nur lokal lagern. Die Daten im sessionStorage werden nicht zusammen mit der HTTP-Anfrage an den Server gesendet. Sie werden nur lokal wirksam und die Daten werden nach dem Schließen der Registerkarte gelöscht. (Wenn Sie die Tab-Wiederherstellungsfunktion von Chrome verwenden, werden auch die Daten in seesionStorage wiederhergestellt.)

4) Speichermethode. Die Speichermethode von sessionStorage übernimmt Schlüssel- und Wertmethoden. Der Wert von value muss vom Typ „String“ sein (die Übergabe eines Nicht-Strings wird beim Speichern ebenfalls in einen String umgewandelt. Ein wahrer Wert wird in „wahr“ umgewandelt).

5) Speicherlimit: Verschiedene Browser haben unterschiedliche Speicherlimits, aber die meisten Browser begrenzen das Limit auf weniger als 5 MB.

Sie können http://dev-test.nemikor.com/web-storage/support-test/ besuchen, um das Speicherlimit des Browsers zu testen.

1.3 Mindestversion des unterstützten Browsers

Mindestversion des Browsers, die sessionStorage unterstützt: IE8, Chrome 5.

1.4 Geeignete Szenarien

sessionStorage eignet sich sehr gut für SPA (Single-Page-Anwendung) und kann problemlos Werte in jedem Geschäftsmodul übertragen.

2. Mitglied

2.1 Attribute

readonly int sessionStorage.length: Gibt eine Ganzzahl zurück, die den Speicher angibt existieren Die Anzahl der Datenelemente (Schlüssel-Wert-Paare) im sessionStorage-Objekt.

2.2 Methode

string sessionStorage.key(int index): Gibt den Schlüsselnamen der Indexnummer des aktuellen sessionStorage-Objekts zurück. Wenn nicht, geben Sie null zurück.

string sessionStorage.getItem(string key): Gibt den Wert zurück, der dem Schlüsselnamen entspricht. Wenn nicht, geben Sie null zurück.

void sessionStorage.setItem(string Schlüssel, Zeichenfolgenwert): Diese Methode akzeptiert einen Schlüssel und einen Wert als Parameter und fügt das Schlüssel-Wert-Paar zum Speicher hinzu. Wenn der Schlüssel vorhanden ist, aktualisiert er seinen entsprechenden Wert.

void sessionStorage.removeItem(string key): Entfernen Sie den angegebenen Schlüsselnamen (key) aus dem sessionStorage-Objekt.

void sessionStorage.clear() : Alle Elemente des sessionStorage-Objekts löschen.

3. Beispiel

3.1 Daten speichern

3.1.1 Verwenden Sie die setItem()-Methode zum Speichern

sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值

3.1.2 Speichern über Attribute

sessionStorage['testKey'] = '这是一个测试的value值';

3.2 Daten lesen

3.2.1 Den Wert über die getItem()-Methode abrufen

sessionStorage.getItem('testKey'); // => 返回testKey对应的值

3.2.2 Den Wert über das Attribut abrufen

sessionStorage['testKey']; // => 这是一个测试的value值

3.3 Speichern von Json-Objekten

sessionStorage kann auch Json-Objekte speichern: Beim Speichern wird das Objekt über JSON.stringify() in ein Textformat konvertiert; beim Lesen wird der Text über JSON konvertiert .parse() Objekt zurückgeben.

var userEntity = {
    name: 'tom',
    age: 22
};
 
// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
 
// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom

Verwandte Empfehlungen:

sessionStorage speichert JSON-Objekte

Verwenden Sie sessionStorage, um JSON-Objekte zu speichern und abzurufen

sessionStorage lokale Speicherdateninstanz

Das obige ist der detaillierte Inhalt vonDetailliertes Verständnis des sessionStorage-Objekts in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!