Wie kann ich Formulardaten über Seitenladevorgänge hinweg in JavaScript beibehalten?

So behalten Sie Variablen zwischen Seitenladevorgängen bei

Da HTTP zustandslos ist, kann die Erfassung des Status der Formularübermittlung zwischen Seitenaktualisierungen eine Herausforderung sein. Eine dauerhafte Speicherung zwischen Seitenladevorgängen ist mit JavaScript allein nicht einfach zu erreichen.

Abfragezeichenfolge

Beim Senden von Formularen mit der GET-Methode werden Abfragezeichenfolgen erstellt (?parameter=value). ). Indem Sie ein Eingabefeld im Formular auf einen bestimmten Wert festlegen, können Sie die Abfragezeichenfolge verwenden. Zum Beispiel:

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

Beim Absenden des Formulars wird die Abfragezeichenfolge aktualisiert, um den angeklickten Parameter einzuschließen. Wenn die Seite neu geladen wird, können Sie die Abfragezeichenfolge überprüfen, um festzustellen, ob auf die Schaltfläche „Senden“ geklickt wurde.

Web Storage

HTML5 bietet Web Storage, sodass Daten gespeichert werden können im Browser über Seitenaufrufe hinweg. LocalStorage speichert Daten auf unbestimmte Zeit, während SessionStorage Daten nur während der aktuellen Browsersitzung speichert. Hierfür eignet sich SessionStorage:

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

Cookies

Cookies können auch clientseitig Daten speichern. Mit jQuery können Sie ganz einfach Cookies setzen:

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

Window.name

Als Hacker-Ansatz können Sie Daten in der Eigenschaft window.name speichern:

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

Dieser Ansatz ist auf die aktuelle Registerkarte beschränkt und speichert nur Zeichenfolgen.

Das obige ist der detaillierte Inhalt vonWie kann ich Formulardaten über Seitenladevorgänge hinweg in JavaScript beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!