在表单的提交事件处理函数中,先将需要存储的组件的值存储到localStorage中,然后在页面加载时从localStorage中读取值并为组件设置初始值。
代码示例:
HTML:
JavaScript: const form = document.querySelector('#myForm'); const inputUsername = form.querySelector('[name="username"]'); const inputPassword = form.querySelector('[name="password"]');
function handleFormSubmit(event) { event.preventDefault();
// 将需要存储的组件的值存储到localStorage中 localStorage.setItem('username', inputUsername.value); localStorage.setItem('password', inputPassword.value);
alert('Form submitted');
// 重置表单 form.reset(); }
form.addEventListener('submit', handleFormSubmit);
// 页面加载时从localStorage中读取值并为组件设置初始值 inputUsername.value = localStorage.getItem('username') || ''; inputPassword.value = localStorage.getItem('password') || '';