Bagaimana untuk menggunakan JavaScript untuk merealisasikan fungsi penjimatan automatik data borang?

Bagaimana untuk menggunakan JavaScript untuk merealisasikan fungsi penjimatan automatik data borang?

Dalam pembangunan laman web, borang adalah elemen yang kerap digunakan, dan penyimpanan data borang yang dimasukkan oleh pengguna adalah keperluan fungsian yang penting. Apabila pengguna mengisi borang, jika mereka memuat semula halaman secara tidak sengaja, menutup penyemak imbas, atau memutuskan sambungan dari Internet secara tidak sengaja, data yang dimasukkan sebelum ini akan hilang, yang tidak mesra kepada pengalaman pengguna. Untuk menyelesaikan masalah ini, kami boleh menggunakan JavaScript untuk melaksanakan fungsi penyimpanan automatik data borang untuk memastikan data yang diisi oleh pengguna dilindungi pada tahap tertentu.

Berikut ialah kaedah untuk melaksanakan fungsi penyimpanan automatik data borang, menggunakan objek localStorage untuk menyimpan data.

Mula-mula, tambahkan pendengar acara pada setiap elemen input borang (seperti input, textarea, dll.), dan apabila pengguna memasukkan, simpan data ke localStorage. Kodnya adalah seperti berikut:

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

Seterusnya, apabila halaman dimuatkan, kita perlu menyemak sama ada data borang telah disimpan dalam localStorage, dan jika ya, isikan data ke dalam borang. Kodnya adalah seperti berikut:

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

Akhir sekali, kami juga perlu mengosongkan data dalam localStorage apabila pengguna menyerahkan borang untuk memastikan borang tersebut kosong pada kali berikutnya pengguna memasuki halaman. Kod tersebut adalah seperti berikut:

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

Dengan kod di atas, apabila pengguna memasukkan data dalam borang, data akan disimpan secara automatik ke localStorage. Apabila pengguna menyegarkan halaman, menutup penyemak imbas atau membuka semula halaman, jika data yang dimasukkan sebelum ini tidak diserahkan, kandungan yang dimasukkan sebelum ini akan dipaparkan dalam borang apabila pengguna memasuki halaman itu semula.

Perlu diambil perhatian bahawa oleh kerana localStorage disimpan dalam unit nama domain, halaman lain di bawah nama domain yang sama juga boleh berkongsi data dengan membaca data dalam localStorage.

Di atas ialah contoh kod menggunakan JavaScript untuk melaksanakan fungsi menyimpan automatik data borang. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk merealisasikan fungsi penjimatan automatik data borang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!