如何使用 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中文網其他相關文章！
