Comment utiliser JavaScript pour réaliser la fonction de sauvegarde automatique des données du formulaire ?

Comment utiliser JavaScript pour réaliser la fonction de sauvegarde automatique des données de formulaire ?

Dans le développement de sites Web, les formulaires sont des éléments fréquemment utilisés et le stockage des données de formulaire saisies par les utilisateurs est une exigence fonctionnelle importante. Lorsque les utilisateurs remplissent un formulaire, s'ils actualisent accidentellement la page, ferment le navigateur ou se déconnectent accidentellement d'Internet, les données précédemment saisies seront perdues, ce qui n'est pas convivial pour l'expérience utilisateur. Afin de résoudre ce problème, nous pouvons utiliser JavaScript pour implémenter la fonction de sauvegarde automatique des données du formulaire afin de garantir que les données renseignées par les utilisateurs sont protégées dans une certaine mesure.

Ce qui suit est une méthode pour implémenter la fonction de sauvegarde automatique des données du formulaire, en utilisant l'objet localStorage pour sauvegarder les données.

Tout d'abord, ajoutez un écouteur d'événement sur chaque élément d'entrée du formulaire (tel que l'entrée, la zone de texte, etc.), et lorsque l'utilisateur saisit, enregistrez les données dans localStorage. Le code est le suivant :

// 为表单元素添加事件监听
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));
}

Ensuite, lorsque la page se charge, nous devons vérifier si les données du formulaire ont été enregistrées dans localStorage, et si c'est le cas, remplir les données dans le formulaire. Le code est le suivant :

// 检查 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] || '';
    });
  }
});

Enfin, nous devons également effacer les données dans localStorage lorsque l'utilisateur soumet le formulaire pour garantir que le formulaire est vide la prochaine fois que l'utilisateur entrera sur la page. Le code est le suivant :

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

Avec le code ci-dessus, lorsque l'utilisateur saisit des données dans le formulaire, les données seront automatiquement enregistrées dans localStorage. Lorsque l'utilisateur actualise la page, ferme le navigateur ou rouvre la page, si les données précédemment saisies ne sont pas soumises, le contenu précédemment saisi sera affiché dans le formulaire lorsque l'utilisateur entrera à nouveau dans la page.

Il convient de noter que puisque localStorage est stocké dans des unités de nom de domaine, d'autres pages sous le même nom de domaine peuvent également partager des données en lisant les données dans localStorage.

Ce qui précède est un exemple de code d'utilisation de JavaScript pour implémenter la fonction de sauvegarde automatique des données de formulaire. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!