How to use JavaScript to realize the automatic saving function of form data?

How to use JavaScript to realize the automatic saving function of form data?

In website development, forms are frequently used elements, and the storage of form data entered by users is an important functional requirement. When users fill out a form, if they accidentally refresh the page, close the browser, or accidentally disconnect from the Internet, the previously entered data will be lost, which is unfriendly to the user experience. In order to solve this problem, we can use JavaScript to implement the automatic saving function of form data to ensure that the data filled in by users is protected to a certain extent.

The following is a method to implement the automatic saving function of form data, using the localStorage object to save data.

First, add an event listener on each input element of the form (such as input, textarea, etc.), and when the user enters, save the data to localStorage. The code is as follows:

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

Next, when the page loads, we need to check whether the form data has been saved in localStorage, and if so, fill the data into the form. The code is as follows:

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

Finally, we also need to clear the data in localStorage when the user submits the form to ensure that the form is blank the next time the user enters the page. The code is as follows:

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

Through the above code, when the user enters data in the form, the data will be automatically saved to localStorage. When the user refreshes the page, closes the browser, or reopens the page, if the previously entered data is not submitted, the previously entered content will be displayed in the form when the user enters the page again.

It should be noted that since localStorage is stored in domain name units, other pages under the same domain name can also share data by reading the data in localStorage.

The above is a code example of using JavaScript to realize the automatic saving function of form data. Hope this article is helpful to you!

The above is the detailed content of How to use JavaScript to realize the automatic saving function of form data?. For more information, please follow other related articles on the PHP Chinese website!