Spezifische Analyse von localStorage und sessionStorage des lokalen HTML5-Speichers

1. Übersicht

LocalStorage und sessionStorage werden gemeinsam als Web Storage bezeichnet und ermöglichen es Webseiten, Daten auf der Browserseite zu speichern.

Die von sessionStorage gespeicherten Daten werden für eine Sitzung des Browsers verwendet. Wenn die Sitzung endet (normalerweise wird das Fenster geschlossen), werden die von localStorage gespeicherten Daten für eine lange Zeit gelöscht Wenn Sie die Website besuchen, kann die Webseite zuvor gespeicherte Daten direkt lesen. Bis auf die unterschiedlichen Speicherfristen sind die Eigenschaften und Methoden dieser beiden Objekte exakt gleich.

Sie ähneln einer erweiterten Version des Cookie-Mechanismus und können viel größeren Speicherplatz nutzen. Derzeit hängt das Speicherlimit pro Domain vom Browser ab und beträgt 2,5 MB für Chrome, 5 MB für Firefox und Opera und 10 MB für IE. Unter diesen wird der Speicherplatz von Firefox durch den Domänennamen der ersten Ebene bestimmt, während andere Browser diese Einschränkung nicht haben. Das heißt, in Firefox teilen sich a.example.com und b.example 5 MB Speicherplatz. Darüber hinaus sind sie ebenso wie Cookies durch dieselbe Domain eingeschränkt. Die auf einer Webseite gespeicherten Daten können nur von Webseiten derselben Domain gelesen werden.

Indem Sie prüfen, ob das Fensterobjekt die Attribute sessionStorage und localStorage enthält, können Sie feststellen, ob der Browser diese beiden Objekte unterstützt.

function checkStorageSupport() {    
var result = {};    
//sessionStorage
    if (window.sessionStorage) {
        result.sessionStorage = true;
    } else {
        result.sessionStorage = false;
    }    //localStorage
    if (window.localStorage) {
        result.localStorage = true;
    } else {
        result.localStorage = false;
    }    return result;

}

2. Funktionsweise

2.1 Speichern/Lesen von Daten

Die von sessionStorage und localStorage gespeicherten Daten liegen in Form von „Schlüssel-Wert-Paaren“ vor. Mit anderen Worten: Jedes Datenelement hat einen Schlüsselnamen und einen entsprechenden Wert. Alle Daten werden im Textformat gespeichert.

Verwenden Sie die setItem-Methode zum Speichern von Daten. Es akzeptiert zwei Parameter: Der erste ist der Schlüsselname und der zweite die gespeicherten Daten.

sessionStorage.setItem('key', 'value');

localStorage.setTime('key', 'value');

Daten mit der getItem-Methode lesen. Es gibt nur einen Parameter, nämlich den Schlüsselnamen.

var valueSession = sessionStorage.getItem('key');var valueLocal = localStorage.getItem('key');

2.2 Daten löschen

Die Methode „removeItem“ wird verwendet, um die Daten zu löschen, die einem bestimmten Schlüsselnamen entsprechen. Mit der Methode

sessionStorage.removeItem('key');

localStorage.removeItem('key');

clear werden alle gespeicherten Daten gelöscht.

sessionStorage.clear();

localStorage.clear();

2.3 Traversal-Operation

Mit dem Längenattribut und der Schlüsselmethode können Sie alle Schlüssel durchlaufen.

for (var i = 0; i < localStorage.length; i++) {
    console.log(localStorage.key(i));
}

Die Schlüsselmethode erhält den Schlüsselwert basierend auf der Position (beginnend bei 0).

localStorage.key(1);

3. Speicherereignis

Wenn sich die gespeicherten Daten ändern, wird das Speicherereignis ausgelöst. Wir können die

Rückruffunktion für dieses Ereignis angeben.

window.addEventListener('storage', onStorageChange);

Die Callback-Funktion akzeptiert ein Ereignisobjekt als Parameter. Das Schlüsselattribut dieses Ereignisobjekts speichert den geänderten Schlüsselnamen.

function onStorageChange(e) {
    console.log(e.key);
}

Zusätzlich zum Schlüsselattribut verfügt das Ereignisobjekt über drei Attribute:

oldValue: der Wert vor der Aktualisierung. Wenn der Schlüssel neu hinzugefügt wird, ist dieses Attribut null.

newValue: aktualisierter Wert. Wenn der Schlüssel gelöscht wurde, ist diese Eigenschaft null.

URL: Die URL der Webseite, die ursprünglich das Speicherereignis ausgelöst hat.

Es ist zu beachten, dass dieses Ereignis nicht auf der aktuellen Seite ausgelöst wird, wodurch sich die Daten ändern. Wenn der Browser mehrere Seiten gleichzeitig unter einem Domänennamen öffnet und eine der Seiten die Daten von sessionStorage oder localStorage ändert, werden die Speicherereignisse aller anderen Seiten ausgelöst, und das Speicherereignis wird nicht vom Original ausgelöst Seite. Durch diesen Mechanismus kann die Kommunikation zwischen mehreren Fenstern erreicht werden. Bei allen Browsern außer IE wird das Speicherereignis auf allen Seiten ausgelöst.

Das obige ist der detaillierte Inhalt vonSpezifische Analyse von localStorage und sessionStorage des lokalen HTML5-Speichers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!