Wie realisiert man mit JavaScript die automatische Speicherfunktion von Formulardaten?

Wie verwende ich JavaScript, um die automatische Speicherfunktion von Formulardaten zu realisieren?

Bei der Website-Entwicklung sind Formulare häufig verwendete Elemente und die Speicherung der von Benutzern eingegebenen Formulardaten ist eine wichtige funktionale Anforderung. Wenn Benutzer ein Formular ausfüllen, versehentlich die Seite aktualisieren, den Browser schließen oder versehentlich die Verbindung zum Internet trennen, gehen die zuvor eingegebenen Daten verloren, was sich negativ auf die Benutzererfahrung auswirkt. Um dieses Problem zu lösen, können wir mithilfe von JavaScript die Funktion zum automatischen Speichern von Formulardaten implementieren, um sicherzustellen, dass die vom Benutzer eingegebenen Daten bis zu einem gewissen Grad geschützt sind.

Das Folgende ist eine Methode zum Implementieren der automatischen Speicherfunktion von Formulardaten unter Verwendung des localStorage-Objekts zum Speichern von Daten.

Fügen Sie zunächst einen Ereignis-Listener für jedes Eingabeelement des Formulars hinzu (z. B. Eingabe, Textbereich usw.) und speichern Sie die Daten bei Eingaben des Benutzers in localStorage. Der Code lautet wie folgt:

// 为表单元素添加事件监听
const form = document.querySelector('form');
const inputs = form.querySelectorAll('input, textarea');

inputs.forEach(input => {
  input.addEventListener('input', saveFormData);
});

// 保存表单数据到 localStorage
function saveFormData() {
  const formData = {};

  inputs.forEach(input => {
    formData[input.id] = input.value;
  });

  localStorage.setItem('formData', JSON.stringify(formData));
}

Als nächstes müssen wir beim Laden der Seite prüfen, ob die Formulardaten in localStorage gespeichert wurden, und wenn ja, die Daten in das Formular eingeben. Der Code lautet wie folgt:

// 检查 localStorage 中是否保存了表单数据
window.addEventListener('DOMContentLoaded', () => {
  const formData = localStorage.getItem('formData');

  if (formData) {
    const savedData = JSON.parse(formData);

    inputs.forEach(input => {
      const id = input.id;
      input.value = savedData[id] || '';
    });
  }
});

Schließlich müssen wir auch die Daten in localStorage löschen, wenn der Benutzer das Formular absendet, um sicherzustellen, dass das Formular leer ist, wenn der Benutzer das nächste Mal die Seite betritt. Der Code lautet wie folgt:

// 清除 localStorage 中保存的表单数据
form.addEventListener('submit', () => {
  localStorage.removeItem('formData');
});

Mit dem obigen Code werden die Daten automatisch im lokalen Speicher gespeichert, wenn der Benutzer Daten in das Formular eingibt. Wenn der Benutzer die Seite aktualisiert, den Browser schließt oder die Seite erneut öffnet und die zuvor eingegebenen Daten nicht übermittelt werden, wird der zuvor eingegebene Inhalt im Formular angezeigt, wenn der Benutzer die Seite erneut betritt.

Da localStorage in Domänennameneinheiten gespeichert ist, ist zu beachten, dass auch andere Seiten unter demselben Domänennamen Daten austauschen können, indem sie die Daten in localStorage lesen.

Das Obige ist ein Codebeispiel für die Verwendung von JavaScript zur Implementierung der automatischen Speicherfunktion von Formulardaten. Ich hoffe, dieser Artikel ist hilfreich für Sie!

Das obige ist der detaillierte Inhalt vonWie realisiert man mit JavaScript die automatische Speicherfunktion von Formulardaten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!