Nutzung der Web Storage API, um den Formulareingabestatus nach der Seitenaktualisierung beizubehalten

Dieser Artikel zielt darauf ab, eine Reihe von Front-End-Lösungen bereitzustellen, mit denen der Eingabestatus von Formularen wie Topfpunkten und andere Formulare nach dem Aktualisieren des Benutzers vor dem Senden des Formulars aufbewahrt werden kann. Das Tutorial erläutert ausführlich die Eigenschaften jedes Speichermechanismus, anwendbaren Szenarien und spezifischen JavaScript -Implementierungsmethoden, um die Konsistenz der Benutzererfahrung sicherzustellen.

Die Benutzererfahrung ist bei der Erstellung interaktiver Webanwendungen von entscheidender Bedeutung. Ein häufiges Problem ist, dass wenn ein Benutzer ein Formular ausfüllt, es jedoch nicht übermittelt hat, wenn die Seite versehentlich aktualisiert wird, alle Eingabedaten verloren gehen. Dies ist besonders frustrierend für Formen, die eine große Anzahl von Auswahlmöglichkeiten enthalten, wie z. B. Optionsknopfgruppen. Um dieses Problem zu lösen, können wir die Client -Speichertechnologie verwenden, um die Benutzerauswahl auf der Browser -Seite zu bestehen, wodurch der Formularstatus nach dem Aktualisieren der Seite wiederhergestellt wird.

Kernkonzept: Webspeichermechanismus

Moderne Browser bieten mehrere Client -Speichermechanismen, mit denen Webanwendungen Daten in Benutzerbrowsern speichern können. Diese Mechanismen haben ihre eigenen Eigenschaften und eignen sich für verschiedene Szenarien:

1. Lokale Speicherung :
   • Die Daten haben keine Ablaufzeit und bleiben nicht verfügbar, es sei denn, manuell gelöscht.
   • Große Lagerkapazität (normalerweise 5-10 MB).
   • Die Daten werden im Browser gespeichert und an einen bestimmten Domänennamen gebunden.
   • Geeignet für die langfristige Speicherung von Benutzerpräferenzen, Offline-Daten usw.
2. Sitzungspeicherung :
   • Die Daten werden am Ende der aktuellen Browsersitzung gelöscht (d. H. Beim Schließen der Registerkarte Browser oder des Fensters).
   • Die Speicherkapazität ähnelt der des lokalen Speichers.
   • Die Daten werden im Browser gespeichert und an eine bestimmte Registerkarte gebunden.
   • Geeignet für die vorübergehende Speicherung von Sitzungen im Zusammenhang mit Sitzungen, z. B. Formularentwürfen, Einkaufswagen-Inhalte usw.
3. Kekse :
   • Die Daten können die Ablaufzeit oder auf Sitzungsebene sein.
   • Kleine Lagerkapazität (normalerweise 4 KB).
   • Jede HTTP -Anforderung wird automatisch an den Server gesendet, wodurch der Netzwerkverkehr erhöht wird.
   • Es ist geeignet, um Informationen zur Authentifizierung von Benutzer -Identität, personalisierte Einstellungen usw. zu speichern und wird normalerweise vom Server festgelegt und gelesen.

Implementierungslösung 1: Verwenden Sie die lokale Speicherung für Persistenz

Die lokale Speicherung ist ideal für die Implementierung von Cross-Page-Aktualisierungsvorstellungsformularstatus, da er keine Ablaufzeit hat.

Implementierungsschritte:

1. Anhören von Formelementänderungen : Wenn der Benutzer ein Optionsfeld auswählt, hört er sein Ereignis über JavaScript auf das Änderungsereignis.
2. Daten speichern : Wenn das Änderungsereignis ausgelöst wird, wird das Namensattribut des ausgewählten Optionsfelds als Schlüssel und das Wertschaltattribut als Wert verwendet und in LocalStorage gespeichert.
3. Daten wiederherstellen : Wenn die Seite geladen wird, prüfen Sie, ob zuvor in LocalStorage gespeicherte Werte gespeichert sind. Wenn ja, suchen Sie das entsprechende Optionsfeld und stellen Sie es auf ausgewählt.

Beispielcode:

Angenommen, die HTML -Struktur ist wie folgt, wobei das Namensattribut dynamisch generiert wird, um verschiedene Benutzerauswahlgruppen zu identifizieren:

{ % csrf_token %}

{ % für Benutzer in Benutzern %} {# Angenommen, das Benutzerobjekt hat ein Namensattribut#} { % endfor %}

{{user.name}}

aanwezig afwezig Geoorloofd Afwezig

JavaScript -Code:

 document.addeventListener ('domcontentled', function () {
    const radiobuttons = document.querySelectorAll ('. User-Radio'); // Wählen Sie alle Optionspunkte mit einer bestimmten Klasse // 1. Daten wiederherstellen: Wenn die Seite geladen wird, stellen Sie die vorherige Auswahl von lokalen Speicher -Radiobuttons wieder her.foreach (radio => {
        const sporedValue = localStorage.getItem (Radio.Name);
        if (storedValue && radio.value === speichertValue) {
            Radio.Conted = True;
        }
    });

    // 2. Daten speichern: Hören Sie sich das Änderungsereignis von Optionsknopf radiobuttons.foreach an (Radio => {
        radio.addeventListener ('change', function () {
            if (this.Conted) {
                localStorage.setItem (this.name, this.value);
            }
        });
    });

    // Optional: Relevante Daten löschen, nachdem das Formular erfolgreich eingereicht wurde.
    if (Form) {
        Form.AdDeVentListener ('Submit', function () {
            // Angenommen, die lokal gespeicherten Daten werden nicht mehr benötigt, nachdem das Formular erfolgreich radiobuttons.foreach (Radio => {
                LocalStorage.RemoveItem (Radio.Name);
            });
            // oder feiner verarbeiten, z. // Alle lokalen Speicher löschen, mit Vorsicht verwenden});
    }
});

Anmerkungen:

• Eindeutige ID : In HTML muss das ID -Attribut eindeutig sein. Die ID = "Radio" in der ursprünglichen Frage ist für mehrere Optionsfelder ungültig. Im Beispiel habe ich die ID in Form von ID = "Radio-{{user.id}}-aanwezig" usw. geändert, um die Einzigartigkeit zu gewährleisten.
• Datentyp : LocalStorage und SessionStorage können nur Zeichenfolgen speichern. Wenn Sie Objekte oder Arrays speichern müssen, müssen Sie JSON.Stringify () zur Serialisierung und Deserialisierung beim Lesen verwenden.
• Löschdaten : Wenn das Formular erfolgreich eingereicht wird, sollten die relevanten lokal gespeicherten Daten normalerweise gelöscht werden, um den inkonsistenten Status beim nächsten Besuch zu vermeiden.

Implementierungslösung 2: Verwenden Sie Sitzungsspeicher für die Persistenz auf Sitzungsebene

Die Verwendung der Sitzungspeicher ist dem lokalen Speicher sehr ähnlich. Der Hauptunterschied ist der Lebenszyklus der Daten. Es ist nur während der aktuellen Registerkarte Browser oder der Fensteröffnung gültig, und die Daten werden nach der Schließung gelöscht.

Beispielcode:

Ersetzen Sie einfach LocalStorage im obigen JavaScript -Code durch SessionStorage:

 document.addeventListener ('domcontentled', function () {
    const radiobuttons = document.querySelectorAll ('. User-Radio');

    // 1. Daten wiederherstellen: Wiederherstellen Sie die vorherigen Auswahl RadioButtons.foreach (radio => {
        const sporedValue = sessionStorage.getItem (Radio.Name); // Der Unterschied ist hier, wenn (gespeichert Value && Radio.Value === StoredValue) {
            Radio.Conted = True;
        }
    });

    // 2. Daten speichern: Hören Sie sich das Änderungsereignis von Optionsknopf radiobuttons.foreach an (Radio => {
        radio.addeventListener ('change', function () {
            if (this.Conted) {
                SessionStorage.SetItem (this.name, this.Value); // Der Unterschied ist hier}
        });
    });

    // Optional: Relevante Daten löschen, nachdem das Formular erfolgreich eingereicht wurde.
    if (Form) {
        Form.AdDeVentListener ('Submit', function () {
            radiobuttons.foreach (radio => {
                SessionStorage.RemoveItem (Radio.Name); // Der Unterschied ist hier});
        });
    }
});

Anwendbare Szenarien:

Die Sitzungspeicherung ist eine bessere Wahl, wenn die Daten nur in der aktuellen Browsing-Sitzung des Benutzers verwaltet werden müssen, z. B. der Benutzer, der ein mehrstufiges Formular ausfüllt, die Seite jedoch zur Hälfte aktualisieren oder zwischen verschiedenen Registerkarten wechseln muss (Sitzungsspeicher ist nicht zutreffend, wenn Sie die Registerkarten überqueren müssen).

Implementierungslösung 3: Verwenden Sie Cookies für eine flexible Persistenz

Cookies können die Ablaufzeit so festlegen, dass es so lange vorhanden ist, wie lokaler Speicher oder verschwinden, nachdem die Sitzung über den Sitzungsspeicher hinausgeht. Aufgrund seiner geringen Speicherkapazität und jeder Anfrage wird an den Server gesendet, wird es im Allgemeinen nicht empfohlen, große Mengen an Front-End-Statusdaten zu speichern. Cookies eignen sich besser für eine kleine Anzahl von serverbewussten Zuständen (wie z. B. Benutzeranmeldungsträger).

Beispielcode (kurz):

Da die Cookies -API relativ komplex ist, finden Sie hier ein vereinfachtes Beispiel für das Setzen und Erhalten von Funktionen. In praktischen Anwendungen werden in der Regel Bibliotheken (z. B. JS-Cookies) verwendet, um den Vorgang zu vereinfachen.

 // Helferfunktion: Setzen Sie Cookies
Funktionsetokookie (Name, Wert, Tage) {
    lass expires = "";
    if (Tage) {
        const date = neuer Datum ();
        Datum.Settime (Datum.getTime () (Tage * 24 * 60 * 60 * 1000));
        expires = "; expires =" date.toutcstring ();
    }
    document.cookie = name "=" (value || "") läuft "; path =/";
}

// Helferfunktion: Holen Sie sich Cookies
Funktion getcookie (name) {
    const nameeq = name "=";
    const ca = document.cookie.split (';');
    für (sei i = 0; i <ca.length i sei c="ca" while c.length if return c.substring null zur document.addeventlistener function const radiobuttons="document.querySelectorAll" user-radio daten wiederherstellen: w sie radiobuttons.foreach> {
        const sporedValue = getcookie (radio.name);
        if (storedValue && radio.value === speichertValue) {
            Radio.Conted = True;
        }
    });

    // 2. Daten speichern: Hören Sie sich das Änderungsereignis von Optionsknopf radiobuttons.foreach an (Radio => {
        radio.addeventListener ('change', function () {
            if (this.Conted) {
                setCookie (this.name, this.value, 7); // 7 Tage lang speichern}
        });
    });

    // ... Die Logik des Löschens von Cookies nach der Einreichung von Formular ist ähnlich und setCookie (Name, "", -1) ähnlich
});</ca.length>

Anmerkungen:

• Kapazitätsgrenze : Cookies haben eine sehr geringe Kapazität und sind nicht für die Speicherung großer Datenmengen geeignet.
• Leistungsauswirkungen : Jede HTTP -Anforderung trägt Cookie -Daten, die die Netzwerkbelastung erhöhen können.
• Sicherheit : Für sensible Daten sollten Eigenschaften wie HTTPonly und Secure in Betracht gezogen werden, dies muss jedoch normalerweise auf der Serverseite festgelegt werden.

Zusammenfassen

Das Aufbewahren des Formulareingabestatus nach dem Aktualisieren der Seite ist ein wesentlicher Bestandteil der Verbesserung der Benutzererfahrung. Durch die Nutzung lokaler Speicher, Sitzungspeicher oder Cookies können Entwickler die am besten geeignete Client -Speicherlösung basierend auf den Lebenszyklus- und Speicheranforderungen der Daten auswählen. Lokaler Speicher wird für Form von Formationen bevorzugt, die eine langfristige Aufbewahrung erfordern und nicht häufig mit dem Server interagieren müssen. Die Sitzungspeicherung eignet sich besser für temporäre Sitzungsdaten auf Sitzungsebene. Und Cookies eignen sich besser für eine kleine Menge von Zustandsdaten, die vom Server erfasst werden müssen. In der tatsächlichen Entwicklung wird die Kombination spezifischer Geschäftsszenarien und Datenmerkmale, vernünftiger Auswahl und Realisierung von Datenpersistenz die Robustheit von Webanwendungen und die Benutzerzufriedenheit erheblich verbessern.

Das obige ist der detaillierte Inhalt vonNutzung der Web Storage API, um den Formulareingabestatus nach der Seitenaktualisierung beizubehalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!