要解决本地存储不会保存表单输入的问题,可以使用JavaScript中的localStorage对象来保存和获取表单数据。以下是一个示例代码:
HTML代码:
JavaScript代码:
// 获取表单元素
const form = document.getElementById('myForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
// 检查localStorage中是否有保存的数据
if (localStorage.getItem('formData')) {
const formData = JSON.parse(localStorage.getItem('formData'));
nameInput.value = formData.name;
emailInput.value = formData.email;
}
// 监听表单提交事件
form.addEventListener('submit', function(e) {
e.preventDefault();
// 将表单数据保存到localStorage
const formData = {
name: nameInput.value,
email: emailInput.value
};
localStorage.setItem('formData', JSON.stringify(formData));
// 提交表单
form.submit();
});
以上代码将通过监听表单的提交事件,将表单数据保存到localStorage中。在页面加载时,检查localStorage中是否有保存的数据,并将数据填充到表单输入框中。当用户提交表单时,将表单数据保存到localStorage中。这样,即使页面刷新或关闭后再打开,表单数据仍然会被恢复。
下一篇:本地存储不会被更新。