Speicherfunktion für Formulare.
Gerade bei längeren Formularen kann es hilfreich sein, dem Benutzer eine Speicherfunktion zu bieten. Er kann zu einem späteren Zeitpunkt die Formulardaten wieder laden. Die hier gezeigte Lösung speichert die Formulardaten im Local Storage des Browsers und lädt diese auf Knopfdruck wieder. Das heißt die Daten verlassen den heimischen Computer des Anwenders nicht.
Speichern von Formulardaten
Beginnen wir mit dem Speichern der Daten. Hier laden wir alle Daten des Formulars (ID ggf. Anpassen) und speichern diese in den lokalen Speicher des Browsers.
function saveFormData() {
const form = document.getElementById("form-id");
const formData = new FormData(form);
const object = {};
formData.forEach((value, key) => {
object[key] = value;
});
const json = JSON.stringify(object, null, 2);
localStorage.setItem('formData', json);
alert("Form data saved successfully.");
}
Laden von Formulardaten
Nun zum Laden der Daten. Hier laden wir die Daten wieder in den Speicher und weisen diese den Formularelementen zu. Um Probleme mit Pflichtfeldern vorzubeugen, stoßen wir auch die Validierung an.
function loadFormData() {
const json = localStorage.getItem('formData');
if (json) {
const data = JSON.parse(json);
for (const key in data) {
if (data.hasOwnProperty(key)) {
const element = document.getElementsByName(key)[0];
if (element) {
element.value = data[key];
// Trigger validation
element.dispatchEvent(new Event('input', { bubbles: true }));
element.dispatchEvent(new Event('change', { bubbles: true }));
}
}
}
alert("Form data loaded successfully.");
} else {
alert("No saved form data found.");
}
}
Verwendung, z.B. Laden und Speichern Button
Ein Aufruf der Funktionen kann beispielsweise über Buttons erfolgen:
<button id="saveButton" onclick="saveFormData()" type="button">Speichern</button> <button id="loadButton" onclick="loadFormData()" type="button">Laden</button>
