使用本地存储(localStorage)将表单数据保存在客户端浏览器中,每次加载页面时读取保存的数据并恢复表单状态。
代码示例:
// 保存表单数据 function saveFormState() { const form = document.querySelector('form'); const formData = new FormData(form); const formDataJson = JSON.stringify(Object.fromEntries(formData.entries())); localStorage.setItem('formState', formDataJson); }
// 恢复表单数据 function restoreFormState() { const form = document.querySelector('form'); const formDataJson = localStorage.getItem('formState'); if (formDataJson) { const formData = new FormData(form); const savedFormData = Object.entries(JSON.parse(formDataJson)); for (const [name, value] of savedFormData) { formData.set(name, value); } form.reset(); form.dispatchEvent(new Event('change', { bubbles: true })); } }
// 监听表单变化并保存表单数据 const form = document.querySelector('form'); form.addEventListener('change', saveFormState);
// 页面加载时恢复表单数据 window.addEventListener('load', restoreFormState);