HTML5-Tutorial für Fortgeschrittene – Webspeicher

Vorwort

HTML5 verfügt über zwei Web-Storage-Speichermethoden: localStorage und SessionStorage.

Beide Methoden speichern Daten über Schlüssel-Wert-Paare, die leicht zugänglich sind und die Website-Leistung nicht beeinträchtigen. Ihre Verwendung ist die gleiche, aber ihre Lagerzeiten sind unterschiedlich.
LocalStorage-Daten werden auf lokaler Hardware gespeichert und können dauerhaft gespeichert werden. Die API kann manuell aufgerufen werden, um die Daten zu löschen. sessionStorage wird im Sitzungsobjekt gespeichert und beim Schließen des Browsers gelöscht.

Die Größe des Webspeichers ist im Browser begrenzt. Bei gängigen Browsern beträgt die Größe etwa 5 MB, was tatsächlich ausreicht, um normale Daten zu speichern.

Verwendung

Nehmen Sie localStorage als Beispiel. Die Verwendung von sessionStorage ist dieselbe:

setItem

Daten speichern: localStorage.setItem(key, value );

Beispiel:

localStorage.setItem('name','Hello World');

Wenn die Schlüssel gleich sind, wird der vorherige Wert überschrieben, um die Daten zu ändern. Wenn der Wert ein Objekt ist, muss er in eine JSON-Zeichenfolge konvertiert werden. Andernfalls lautet das, was Sie lesen, [object Object]

getItem

Read data: localStorage.getItem(key);

Beispiel:

localStorage.getItem('name');       // Hello World

removeItem

RemoveEinzeldaten: localStorage.removeItem(key);

Beispiel:

localStorage.removeItem('name');
localStorage.getItem('name');       // null

Nach dem Löschen der Daten mit dem Schlüsselnamen können die Daten nicht in loaclStorage abgerufen werden, daher wird null zurückgegeben;

clear

Alle Daten löschen : localStorage.clear();

Beispiel:

localStorage.clear();

Zu diesem Zeitpunkt werden alle Daten in localStorage gelöscht.

key

Holen Sie sich den Schlüssel eines bestimmten Index: localStorage.key(index);
Beispiel:

localStorage.setItem('name1','Hello World');
localStorage.setItem('name2','Hello Linxin');
localStorage.key(1);                // name2

Holen Sie sich den index Der Schlüssel ist 1, also name2.

Konstruktor

In tatsächlichen Projekten muss localStorage möglicherweise mehrmals ausgeführt werden. Für einen besseren Betrieb können wir einen Konstruktor verwenden.

Beispiel:

var localEvent = function (item) {
    this.get = function () {
        return localStorage.getItem(item);
    }
    this.set = function (val) {
        localStorage.setItem(item, val);
    }
    this.remove = function () {
        localStorage.removeItem(item);
    }
    this.clear = function () {
        localStorage.clear();
    }
}

// 使用new字符把构造函数实例化出多个对象
var local1 = new localEvent('name1');
var local2 = new localEvent('name2');

local1.set('Hello World');
local2.set('Hello Linxin');

local1.get();               // Hello World
local2.get();               // Hello Linxin

Dies ist nur eine einfache Demonstration. Wenn wir normalerweise Objekte in unseren Projekten speichern, müssen wir einige Verarbeitungen im Code durchführen.

Speicherereignisse abhören

Sie können das Speicherereignis des Fensterobjekts abhören und seine Funktion Ereignisbehandlung angeben, wenn localStorage oder sessionStorage wird auf der Seite verarbeitet. Bei Änderung wird die entsprechende Verarbeitungsfunktion ausgelöst.

window.addEventListener('storage',function(e){
    console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);
})

Das Zeitobjekt (e-Parameterwert), das das Ereignis auslöst, hat mehrere Attribute:

• Schlüssel: Schlüsselwert.

• oldValue: der Wert vor der Änderung.

• newValue: der geänderte Wert.

• URL: Seiten-URL.

• storageArea: das geänderte Speicherobjekt.

Hinweis: In Google Chrome muss der Speicher auf verschiedenen Registerkarten geändert werden, um dieses Ereignis auszulösen. Das heißt, Webseite A hört auf dieses Ereignis und localStorage wird auf Webseite B geändert Dann löst die Webseite A die Ereignisfunktion aus. Aber im IE löst das Ändern von localStorage auf derselben Webseite dieses Ereignis aus.

Debuggen

Die mit Google Chrome gelieferten Debugging-Tools (Chrome Devtools) sind sehr einfach zu verwenden und können zum Debuggen von localStorage und sessionStorage verwendet werden. Öffnen Sie den Browser und drücken Sie f12, um das Debugging-Tool aufzurufen. Klicken Sie zum Öffnen auf „Anwendung“, und in der linken Spalte wird „Speicher“ angezeigt, einschließlich „localStorage“, „sessionStorage“, „IndexedDB“ usw. Wählen Sie den Domänennamen der gewünschten Website aus debuggen, rechts sehen Sie den entsprechenden Schlüssel und Wert, der per Rechtsklick bearbeitet oder gelöscht werden kann.

Kompatibel

Es ist mit IE8 und höher kompatibel, aber es ist etwas Besonderes und muss auf dem Server geöffnet werden. Ein direkter Doppelklick auf file:// zum Öffnen der Datei ist nicht kompatibel.

Nur IE11 unterstützt das Öffnen unter „file://“. Andere Browser bieten ein hohes Maß an Unterstützung, einschließlich Kompatibilität auf Mobiltelefonen.

[Verwandte Empfehlungen]

1. Kostenloses h5-Online-Video-Tutorial

2. HTML5-Vollversionshandbuch

3. php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonHTML5-Tutorial für Fortgeschrittene – Webspeicher. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!