如何使用 JavaScript 實作表單資料的自動儲存功能？

如何使用 JavaScript 實作表單資料的自動儲存功能？

在網站開發中，表單是經常會使用到的元素，而使用者輸入的表單資料的保存則是重要的功能需求。使用者在填寫表單時，如果不小心刷新頁面、關閉瀏覽器或意外斷網，先前輸入的資料就會遺失，這對使用者體驗來說是不友善的。為了解決這個問題，我們可以透過使用 JavaScript 實作表單資料的自動儲存功能，來確保使用者填寫的資料在一定程度上得到保障。

以下是實現表單資料自動儲存功能的方法，借助了 localStorage 物件來保存資料。

首先，在表單的每個輸入元素（如 input、textarea 等）上新增一個事件監聽，當使用者輸入時，將資料儲存到 localStorage 中。程式碼如下：

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

接下來，在頁面載入時，我們需要檢查 localStorage 中是否已經儲存了表單數據，如果有，則將資料填入表單中。程式碼如下：

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

最後，我們還需要在使用者提交表單時，清除 localStorage 中的數據，以保證下次使用者進入頁面時，表單是空白的狀態。代碼如下：

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

透過上述程式碼，當使用者在表單中輸入資料時，資料將自動儲存到 localStorage 中。當使用者重新整理頁面、關閉瀏覽器或重新開啟頁面時，如果先前輸入的資料未提交，使用者再次進入頁面時，表單中將會顯示先前輸入的內容。

要注意的是，由於 localStorage 是以網域為單位進行儲存的，所以同一個網域下的其他頁面也可以透過讀取 localStorage 中的資料來實現資料的共享。

以上就是使用 JavaScript 實作表單資料的自動儲存功能的程式碼範例。希望本文對你有幫助！

以上是如何使用 JavaScript 實作表單資料的自動儲存功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！