Pemprosesan borang PHP: sandaran dan pemulihan data borang

Pemprosesan borang PHP: sandaran dan pemulihan data borang

Pengenalan

Dalam proses pembangunan laman web, borang adalah cara interaksi yang sangat biasa Pengguna mengisi borang dan menyerahkan data kepada pelayan untuk diproses. Walau bagaimanapun, kadangkala pengguna mungkin kehilangan data borang disebabkan masalah rangkaian, ranap penyemak imbas atau situasi lain yang tidak dijangka, yang akan menyebabkan masalah kepada pengalaman pengguna. Oleh itu, untuk meningkatkan pengalaman pengguna, kami boleh melaksanakan fungsi sandaran dan pemulihan automatik data borang melalui PHP untuk memastikan data yang diisi oleh pengguna tidak akan hilang.

Borang sandaran data

Apabila pengguna mengisi data pada halaman borang, kami boleh menyimpan data yang dimasukkan oleh pengguna secara kerap ke storan setempat pelayar (Local Storage) melalui JavaScript. Apabila pengguna meninggalkan halaman secara tidak sengaja, atau memuat semula halaman, kami boleh memulihkan data yang disimpan ke borang selepas halaman dimuat semula.

Pertama, kita perlu menambah kod JavaScript pada halaman borang untuk menyimpan data yang dimasukkan oleh pengguna ke storan setempat secara kerap:

<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>

Dalam kod di atas, kami menggunakan fungsi setInterval untuk menyimpan data setiap 1 saat. Mula-mula, kami memilih kotak input teks (input[type="text"]) dan elemen kawasan teks (textarea) dalam semua bentuk melalui kaedah querySelectorAll. Kemudian, kami menggunakan kaedah forEach untuk merentasi semua elemen bentuk dan menyimpan atribut nama elemen dan atribut nilai sebagai pasangan nilai kunci ke dalam objek formData. Akhir sekali, kami menggunakan kaedah localStorage.setItem untuk menukar data borang kepada rentetan JSON dan menyimpannya ke storan setempat.

Seterusnya, kami perlu memulihkan data daripada storan setempat ke borang apabila halaman borang dimuatkan:

<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>

Dalam kod di atas, kami menggunakan fungsi pengendali acara window.onload untuk melaksanakan operasi berkaitan apabila halaman dimuatkan. Mula-mula, kami mendapatkan data borang yang disimpan daripada storan tempatan menggunakan kaedah localStorage.getItem. Kemudian, kami menggunakan kaedah JSON.parse untuk menukar rentetan JSON yang disimpan menjadi objek JavaScript dan mengulangi pasangan nilai kunci dalam objek. Akhir sekali, kami memilih elemen borang yang sepadan melalui kaedah getElementsByName dan memulihkan data yang disimpan ke elemen borang yang sepadan.

Pemulihan data borang

Selepas sandaran data borang dilaksanakan, data terakhir yang diisi akan dipulihkan secara automatik apabila pengguna membuka semula halaman. Walau bagaimanapun, dalam sesetengah senario kami mungkin perlu mencetuskan pemulihan data secara manual, contohnya, jika pengguna ingin mengisi semula borang menggunakan data terakhir yang diisi.

Untuk mencetuskan fungsi pemulihan data secara manual, kami boleh menambah butang "Pulihkan Data" pada halaman borang Apabila pengguna mengklik butang ini, data yang disimpan akan dipulihkan ke borang.

Pertama, kita perlu menambah elemen butang pada halaman borang untuk mencetuskan operasi pemulihan data:

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

Kemudian, kita perlu menambah pengendali acara klik pada butang ini untuk memulihkan data yang disimpan ke borang:

<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>

Dalam kod di atas, kami menggunakan kaedah getElementById untuk mendapatkan elemen DOM bagi butang pemulihan data dan menggunakan kaedah addEventListener untuk menambah pengendali acara klik pada butang. Apabila pengguna mengklik butang, data yang disimpan diambil dari storan setempat dan dipulihkan kepada elemen borang yang sepadan.

Kesimpulan

Melalui contoh kod di atas, kami telah melaksanakan fungsi sandaran dan pemulihan automatik data borang menggunakan JavaScript dan PHP. Dengan kerap menyimpan data ke storan tempatan dan memulihkan data ke borang apabila halaman dimuatkan atau butang diklik, anda boleh mengelakkan kehilangan data yang diisi oleh pengguna dengan berkesan, meningkatkan pengalaman pengguna dan meningkatkan kebolehgunaan tapak web. Dalam proses pembangunan sebenar, kami boleh menyesuaikan dan mengoptimumkan mengikut keperluan khusus untuk memenuhi keperluan senario yang berbeza.

Rujukan:

• [MDN Web Docs: Web Storage API](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/Reference/Global_Objects/JSON/stringify)

Atas ialah kandungan terperinci Pemprosesan borang PHP: sandaran dan pemulihan data borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!