Traitement des formulaires PHP : sauvegarde et récupération des données du formulaire

Traitement des formulaires PHP : sauvegarde et récupération des données des formulaires

Introduction

Dans le processus de développement d'un site Web, les formulaires sont un moyen d'interaction très courant. Les utilisateurs remplissent le formulaire et soumettent les données au serveur pour traitement. Cependant, les utilisateurs peuvent parfois perdre les données du formulaire en raison de problèmes de réseau, de pannes de navigateur ou d'autres situations inattendues, ce qui perturbera l'expérience utilisateur. Par conséquent, afin d'améliorer l'expérience utilisateur, nous pouvons implémenter des fonctions de sauvegarde et de récupération automatiques des données du formulaire via PHP pour garantir que les données renseignées par les utilisateurs ne seront pas perdues.

Sauvegarde des données du formulaire

Lorsque l'utilisateur remplit les données sur la page du formulaire, nous pouvons régulièrement enregistrer les données saisies par l'utilisateur dans le stockage local du navigateur (Local Storage) via JavaScript. Lorsque l'utilisateur quitte accidentellement la page ou actualise la page, nous pouvons restaurer les données enregistrées dans le formulaire après le rechargement de la page.

Tout d'abord, nous devons ajouter du code JavaScript à la page du formulaire pour enregistrer régulièrement les données saisies par l'utilisateur sur le stockage local :

<script>
    // 使用 setInterval 定时保存数据，每1秒保存一次
    setInterval(function() {
        // 选取需要保存数据的表单元素
        var inputElements = document.querySelectorAll('input[type="text"], textarea');
        
        // 创建一个对象用于保存表单数据
        var formData = {};
        
        // 遍历所有表单元素，将元素的name和value作为键值对保存到formData中
        inputElements.forEach(function (element) {
            formData[element.name] = element.value;
        });
        
        // 将表单数据保存到本地存储中
        localStorage.setItem('form_data', JSON.stringify(formData));
    }, 1000); // 每1秒保存一次
</script>

Dans le code ci-dessus, nous utilisons la fonction setInterval pour enregistrer les données toutes les 1 seconde. Tout d’abord, nous sélectionnons les éléments de la zone de saisie de texte (input[type="text"]) et de la zone de texte (textarea) dans tous les formulaires via la méthode querySelectorAll. Ensuite, nous utilisons la méthode forEach pour parcourir tous les éléments du formulaire et enregistrer l'attribut name et l'attribut value de l'élément sous forme de paires clé-valeur dans l'objet formData. Enfin, nous utilisons la méthode localStorage.setItem pour convertir les données du formulaire en chaîne JSON et les enregistrer dans le stockage local.

Ensuite, nous devons restaurer les données du stockage local vers le formulaire lorsque la page du formulaire est chargée :

<script>
    // 当页面加载完毕时执行的函数
    window.onload = function() {
        // 从本地存储中获取保存的数据
        var savedData = localStorage.getItem('form_data');
        
        // 如果存在保存的数据，则恢复到表单中
        if (savedData) {
            // 将JSON字符串转为对象
            var formData = JSON.parse(savedData);
            
            // 遍历表单元素，将保存的数据恢复到相应的表单元素中
            Object.keys(formData).forEach(function(key) {
                var element = document.getElementsByName(key)[0];
                element.value = formData[key];
            });
        }
    }
</script>

Dans le code ci-dessus, nous utilisons la fonction de gestionnaire d'événements window.onload pour effectuer les opérations associées lorsque la page est chargée. Tout d’abord, nous récupérons les données du formulaire enregistrées à partir du stockage local à l’aide de la méthode localStorage.getItem. Ensuite, nous utilisons la méthode JSON.parse pour convertir la chaîne JSON enregistrée en un objet JavaScript et parcourir les paires clé-valeur de l'objet. Enfin, nous sélectionnons l'élément de formulaire correspondant via la méthode getElementsByName et restaurons les données enregistrées dans l'élément de formulaire correspondant.

Récupération des données du formulaire

Une fois la sauvegarde des données du formulaire mise en œuvre, les dernières données renseignées seront automatiquement restaurées lorsque l'utilisateur rouvrira la page. Cependant, dans certains scénarios, nous pouvons avoir besoin de déclencher manuellement la récupération des données, par exemple si l'utilisateur souhaite remplir le formulaire en utilisant les dernières données renseignées.

Afin de déclencher manuellement la fonction de récupération de données, nous pouvons ajouter un bouton "Restaurer les données" à la page du formulaire. Lorsque l'utilisateur clique sur ce bouton, les données stockées seront restaurées dans le formulaire.

Tout d'abord, nous devons ajouter un élément bouton à la page du formulaire pour déclencher l'opération de récupération de données :

<button id="restoreButton">恢复数据</button>

Ensuite, nous devons ajouter un gestionnaire d'événements de clic à ce bouton pour restaurer les données stockées dans le formulaire :

<script>
    // 获取按钮元素
    var restoreButton = document.getElementById('restoreButton');
    
    // 给按钮添加点击事件处理函数
    restoreButton.addEventListener('click', function() {
        // 从本地存储中获取保存的数据
        var savedData = localStorage.getItem('form_data');
        
        // 如果存在保存的数据，则恢复到表单中
        if (savedData) {
            // 将JSON字符串转为对象
            var formData = JSON.parse(savedData);
            
            // 遍历表单元素，将保存的数据恢复到相应的表单元素中
            Object.keys(formData).forEach(function(key) {
                var element = document.getElementsByName(key)[0];
                element.value = formData[key];
            });
        }
    });
</script>

Dans le code ci-dessus, nous utilisons la méthode getElementById pour obtenir l'élément DOM du bouton de restauration des données et utilisons la méthode addEventListener pour ajouter un gestionnaire d'événements de clic au bouton. Lorsque l'utilisateur clique sur le bouton, les données enregistrées sont récupérées du stockage local et restaurées dans l'élément de formulaire correspondant.

Conclusion

Grâce aux exemples de code ci-dessus, nous avons implémenté la fonction de sauvegarde et de récupération automatique des données de formulaire à l'aide de JavaScript et PHP. En enregistrant régulièrement les données sur le stockage local et en restaurant les données dans le formulaire lorsque la page est chargée ou que vous cliquez sur un bouton, vous pouvez efficacement éviter la perte de données renseignées par les utilisateurs, améliorer l'expérience utilisateur et augmenter la convivialité du site Web. Dans le processus de développement actuel, nous pouvons personnaliser et optimiser en fonction de besoins spécifiques pour répondre aux besoins de différents scénarios.

Références :

• [MDN Web Docs : API de stockage Web](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)
• [MDN Web Docs : Document.querySelector ( )](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
• [MDN Web Docs : JSON.parse()](https://developer.mozilla.org /en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)
• [MDN Web Docs : JSON.stringify()](https://developer.mozilla.org/en-US/docs/ Web /JavaScript/Référence/Global_Objects/JSON/stringify)

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!