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

Rückruffunktion für dieses Ereignis angeben.

window.addEventListener('storage', onStorageChange);

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

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!