Eine kurze Diskussion über die Verwendung der Web Storage API

1. Lokale Speichertechnologie des Browsers

Zusätzlich zur frühesten Verwendung von Cookies zur lokalen Speicherung verwenden moderne Browser die Web Storage API, um die Schlüssel-/Wertspeicherung zu erleichtern.

Web Storage bietet zwei Speichermethoden:

1.1, Sitzungsspeicher

Für jede Zugriffsquelle wird ein separater Speicherbereich verwaltet. Solange der Browser nicht geschlossen wird, verschwinden die Daten nicht.

Diese Art der Speicherung wird Sitzungsspeicher genannt.

Beachten Sie, dass die Bedeutung von Sitzung hier nicht mit der von serverseitiger Sitzung übereinstimmt. Der SessionStorage ist hier nur lokaler Speicher und überträgt keine Daten an den Server.

Die Speicherkapazität von sessionStorage ist viel größer als die von Cookies, die 5 MB erreichen kann.

1.2, lokaler Speicher

Ähnlich wie sessionStorage wird es auch zur Datenspeicherung verwendet. Der Unterschied besteht darin, dass die in localStorage gespeicherten Daten beim Schließen des Browsers nicht verschwinden.

Ich kann localStorage löschen, indem ich eine Ablaufzeit festlege, es manuell mit JavaScript lösche oder den Browser-Cache lösche.

Diese beiden Speichermethoden werden über Window.sessionStorage und Window.localStorage verwendet. Schauen wir uns doch einmal die Definition von Fenster an:

Schnittstelle Window erweitert EventTarget, AnimationFrameProvider, GlobalEventHandlers, WindowEventHandlers, WindowLocalStorage, WindowOrWorkerGlobalScope, WindowSessionStorage

Window erbt WindowLocalStorage und WindowSessionStorage, sodass wir sessionStorage und localStorage direkt von Window erhalten können.

Für jeden Ursprung erstellen Window.sessionStorage und Window.localStorage ein neues Speicherobjekt zum Lesen von Daten.

2. Web Storage-bezogene Schnittstellen

Es gibt drei Schnittstellen im Zusammenhang mit dem Webspeicher. Das erste ist das gerade erwähnte Fenster. Wir können SessionStorage und LocalStorage über das Fenster abrufen.

Das zweite ist das Speicherobjekt. Beide erhaltenen Speicherobjekte sind Speicherobjekte.

Schnittstelle Speicher {

    schreibgeschützte Länge: Zahl;

    löschen(): ungültig;

    getItem(Schlüssel: Zeichenfolge): Zeichenfolge | null;

    Schlüssel(Index: Zahl): Zeichenfolge | null;

    removeItem(Schlüssel: Zeichenfolge): ungültig;

    setItem(Schlüssel: Zeichenfolge, Wert: Zeichenfolge): void;
    [Name: Zeichenfolge]: beliebig;
}

Wir können sehen, dass das Speicherobjekt uns viele nützliche Methoden für den Datenzugriff bietet.

Das dritte ist StorageEvent, das das StorageEvent-Ereignis auslöst, wenn der Speicher Änderungen erkennt.

3. Browserkompatibilität

Lassen Sie uns anhand von zwei Bildern die Kompatibilität dieser beiden Speicher in verschiedenen Browsern veranschaulichen:

Fenster.localStorage:

Fenster.sessionStorage:

Wie Sie sehen, unterstützen moderne Browser diese beiden Speicherfunktionen grundsätzlich.

Wenn wir einen älteren Browser wie Internet Explorer 6, 7 oder andere nicht aufgeführte Browser verwenden, müssen wir feststellen, ob die Speicherung vom Browser tatsächlich unterstützt wird.

Sehen wir uns an, wie der Test durchgeführt wird:

Funktion storageAvailable(Typ) {
    var-Speicher;
    versuchen {
        Speicher = Fenster[Typ];
        var x = "__storage_test__";
        storage.setItem(x, x);
        storage.removeItem(x);
        gibt true zurück;
    }
    Fang(e) {
        returniere eine Instanz von DOMException && (
            // alles außer Firefox
            e.code === 22 ||
            //Feuerfuchs
            e.code === 1014 ||
            // Testen Sie auch das Namensfeld, da möglicherweise kein Code vorhanden ist
            // alles außer Firefox
            e.name === 'QuotaExceededError' ||
            //Feuerfuchs
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // QuotaExceededError nur bestätigen, wenn bereits etwas gespeichert ist
            (Speicher && Speicherlänge !== 0);
    }
}

Der Typ ist „localStorage“ oder „sessionStorage“, und wir fangen die Ausnahme ab, um zu bestimmen, ob ein gültiges Storge-Objekt vorhanden ist.

Sehen wir uns an, wie wir es verwenden:

wenn (Speicher verfügbar ('localStorage')) {
  // Jippie! Wir können die Genialität von localStorage nutzen
}
anders {
  // Schade, kein localStorage für uns
}

4. Inkognito-Modus

Die meisten modernen Browser unterstützen einen Inkognito-Modus, in dem Datenschutzoptionen wie der Browserverlauf und Cookies nicht gespeichert werden.

Daher ist es nicht mit Web Storage kompatibel. Wie lässt sich dieses Problem also lösen?

Verschiedene Browser verwenden möglicherweise unterschiedliche Lösungen.

Beispielsweise ist in Safari der Webspeicher im Inkognito-Modus verfügbar, es wird aber nichts gespeichert.

Einige Browser löschen beim Schließen des Browsers auch den gesamten vorherigen Speicher.

Daher müssen wir während des Entwicklungsprozesses auf die unterschiedlichen Verarbeitungsmethoden verschiedener Browser achten.

5. Verwenden der Web Storage API

Bei Storage-Objekten können wir wie bei gewöhnlichen Objekten direkt auf die Eigenschaften im Objekt zugreifen oder Storage.getItem() und Storage.setItem() verwenden, um auf Eigenschaften zuzugreifen und diese festzulegen.

Beachten Sie, dass die Schlüsselwerte im Speicherobjekt alle vom Typ Zeichenfolge sind. Selbst wenn Sie eine Ganzzahl eingeben, wird diese in eine Zeichenfolge konvertiert.

Die folgenden Beispiele können alle eine ColorSetting-Eigenschaft festlegen:

localStorage.colorSetting = "#a4509b";
localStorage['Farbeinstellung'] = '#a4509b';
localStorage.setItem('Farbeinstellung', '#a4509b');

Obwohl alle drei Methoden Speicher- und Zugriffsfunktionen erreichen können, empfehlen wir die Verwendung der Web Storage API: setItem, getItem, removeItem, key, length usw.

Zusätzlich zum Festlegen der Werte im Speicher können wir auch StorageEvent auslösen und abhören.

Werfen wir einen Blick auf die Definition von StorageEvent:

Schnittstelle StorageEvent erweitert Event {

    schreibgeschützter Schlüssel: Zeichenfolge | null;

    schreibgeschützter neuer Wert: Zeichenfolge | null;

    schreibgeschützter alterWert: Zeichenfolge | null;

    schreibgeschützter Speicherbereich: Speicher | null;

    schreibgeschützte URL: Zeichenfolge;
}

Immer wenn ein Storage-Objekt eine Änderung sendet, wird ein StorageEvent-Ereignis ausgelöst.

Beachten Sie, dass eine Änderung des SessionStorage nicht ausgelöst wird.

Wenn es bei einer Seite in einer Domäne zu einer Speicheränderung kommt, überwachen andere Seiten in der Domäne die Änderung. Wenn es sich um andere Domänen handelt, kann dieses StorageEvent natürlich nicht überwacht werden.

Wir können Speicherereignisse über die addEventListener-Methode des Fensters hinzufügen, wie unten gezeigt:

window.addEventListener('Speicher', Funktion(e) {  
  document.querySelector('.mein-key').textContent = e.key;
  document.querySelector('.mein-alter').textContent = e.alterWert;
  document.querySelector('.my-new').textContent = e.neuerWert;
  document.querySelector('.meine-url').textContent = e.url;
  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
});

Im obigen Beispiel erhalten wir den Schlüssel, den alten Wert, den neuen Wert, die URL und das Speicherobjekt von StorageEvent.

Oben finden Sie eine kurze Erläuterung der Details zur Verwendung der Web Storage API. Weitere Informationen zur Web Storage API finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!