Wie kann ich Variablen beim erneuten Laden von Seiten in Webanwendungen beibehalten?

So behalten Sie Variablen zwischen Seitenladevorgängen bei

Das Verfolgen von Benutzeraktionen beim erneuten Laden von Seiten ist entscheidend für die Verbesserung der Benutzererfahrung in Webanwendungen. Aufgrund der zustandslosen Natur von HTTP kann diese Aufgabe jedoch eine Herausforderung sein.

Versuch und Fehler

Ein erfolgloser Versuch, das Formularsendeereignis zu erfassen und anschließend ausgeblendet einzublenden Felder wurde gemeldet. Der JavaScript-Code verwendete eine globale Variable (angeklickt), um den Übermittlungsstatus zu speichern, konnte ihren Wert jedoch bei der Seitenaktualisierung nicht beibehalten.

Lösungen

Um dieses Problem zu beheben Es gibt mehrere Methoden, die implementiert werden können:

1. Abfragezeichenfolge

Beim Senden von Formularen mit der GET-Methode wird die URL mit einer Abfragezeichenfolge aktualisiert, die Parameter-Wert-Paare enthält. Dadurch können Sie ein Eingabefeld im Formular auf einen bestimmten Wert setzen. Beispielsweise kann ein verstecktes Feld hinzugefügt werden:

<form method="GET">
<input type="hidden" name="clicked" value="true" />
<input type="submit" />
</form>

Bei nachfolgenden Seitenladevorgängen können Sie JavaScript verwenden, um die Abfragezeichenfolge zu analysieren und auf übergebene Werte zu prüfen:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\[").replace(/[\]]/, "\]");
    var regex = new RegExp("[\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var clicked = getParameterByName('clicked');

2. Web Storage

HTML5 führte Web Storage ein, das eine API zum Beibehalten von Daten im Browser über Seitenladevorgänge hinweg bereitstellt. Es bietet zwei Optionen: sessionStorage und localStorage.

sessionStorage:

• Daten bleiben nur während der aktuellen Browsersitzung bestehen.
• Zum Speichern geeignet Temporäre Daten, wie z. B. angeklickte Zustände.

Code zum Festlegen der Schaltfläche „sessionStorage“. Klicken Sie auf:

$('input[type="submit"][value="Search"]').click(function() {
    sessionStorage.setItem('clicked', 'true');
});

Code zum Überprüfen, ob sessionStorage beim Laden der Seite festgelegt ist:

var clicked = sessionStorage.getItem('clicked');

localStorage:

• Daten bleiben bestehen Auf unbestimmte Zeit (sofern vom Benutzer nicht manuell gelöscht).
• Nützlich zum Speichern von Daten über einen Zeitraum hinaus einzelne Browsersitzung.

Code zum Festlegen von localStorage beim Klicken auf die Schaltfläche:

$('input[type="submit"][value="Search"]').click(function() {
    localStorage.setItem('clicked', 'true');
});

Code zum Überprüfen, ob localStorage beim Laden der Seite festgelegt ist:

var clicked = localStorage.getItem('clicked');

3. Cookies

Cookies bieten einen weiteren Mechanismus zur dauerhaften Datenspeicherung. Im Gegensatz zu Web Storage sind Cookies in erster Linie für die serverseitige Kommunikation konzipiert, können aber auch für die clientseitige Datenaufbewahrung verwendet werden.

jQuery vereinfacht die Handhabung von Cookies:

$('input[type="submit"][value="Search"]').click(function() {
    $.cookie('clicked', 'true', {expires: 1}); // expires in 1 day
});

Code zum Lesen ein Cookie beim Laden der Seite:

var clicked = $.cookie('clicked');

Um ein Cookie zu entfernen, rufen Sie $.cookie('clicked', null).

4. window.name

Obwohl etwas unkonventionell, kann die Eigenschaft window.name zum Speichern von Daten über Seitenaktualisierungen hinweg verwendet werden:

window.name = "my value";

Strings oder serialisierte Objekte können gespeichert werden:

window.name = JSON.stringify({ clicked: true });

Dieser Ansatz weist jedoch Einschränkungen auf. Der Zugriff ist über Tabs und Domänen hinweg möglich, jedoch nur innerhalb derselben Browsersitzung. Es wird im Allgemeinen nicht für die Beibehaltung wichtiger Daten empfohlen.

Das obige ist der detaillierte Inhalt vonWie kann ich Variablen beim erneuten Laden von Seiten in Webanwendungen beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!