在前端开发场景中，用户填写HTML表单时如果遇到页面意外刷新、浏览器关闭等情况，未提交的表单数据很容易丢失，影响用户体验。使用localStorage可以将表单数据持久化存储在浏览器本地，即使关闭页面后重新打开，也能恢复之前填写的内容。
localStorage的基本特性
localStorage是HTML5引入的浏览器本地存储API，属于Web Storage规范的一部分，主要有以下几个特点：
- 存储容量通常为5MB左右，远大于cookie的4KB限制
- 存储的数据不会随HTTP请求发送到服务器，仅在本地生效
- 存储的数据没有过期时间，除非手动删除，否则会一直保留
- 只能存储字符串类型的数据，复杂数据类型需要先序列化再存储
表单数据存储到localStorage的实现步骤
1. 创建基础HTML表单
首先我们先创建一个包含常见输入项的表单，后续会将这个表单的输入数据存储到localStorage中：
<form id="userForm">
<div>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
</div>
<div>
<label for="hobby">爱好：</label>
<textarea id="hobby" name="hobby"></textarea>
</div>
<button type="button" id="saveBtn">保存数据</button>
<button type="button" id="clearBtn">清空数据</button>
</form>
2. 监听输入事件存储数据
我们可以通过监听表单输入项的input事件，在用户输入时实时将表单数据存储到localStorage中，也可以提供手动保存按钮触发存储逻辑：
// 获取表单元素
const form = document.getElementById('userForm');
const usernameInput = document.getElementById('username');
const emailInput = document.getElementById('email');
const hobbyInput = document.getElementById('hobby');
const saveBtn = document.getElementById('saveBtn');
const clearBtn = document.getElementById('clearBtn');
// 存储表单数据到localStorage的函数
function saveFormData() {
// 获取当前表单所有输入值
const formData = {
username: usernameInput.value,
email: emailInput.value,
hobby: hobbyInput.value
};
// 将对象序列化为JSON字符串后存储
localStorage.setItem('userFormData', JSON.stringify(formData));
alert('表单数据已存储到本地');
}
// 实时监听输入变化存储数据
usernameInput.addEventListener('input', saveFormData);
emailInput.addEventListener('input', saveFormData);
hobbyInput.addEventListener('input', saveFormData);
// 手动保存按钮点击事件
saveBtn.addEventListener('click', saveFormData);
3. 页面加载时读取并回填数据
为了让用户重新打开页面时能看到之前填写的表单数据，我们需要在页面加载完成后从localStorage中读取数据并回填到表单中：
// 页面加载完成后执行回填逻辑
window.addEventListener('DOMContentLoaded', function() {
// 从localStorage中读取存储的表单数据
const savedData = localStorage.getItem('userFormData');
if (savedData) {
try {
// 将JSON字符串反序列化为对象
const formData = JSON.parse(savedData);
// 回填到对应的表单输入项
if (formData.username) usernameInput.value = formData.username;
if (formData.email) emailInput.value = formData.email;
if (formData.hobby) hobbyInput.value = formData.hobby;
} catch (e) {
console.error('解析存储的表单数据失败', e);
}
}
});
4. 清空存储的表单数据
我们可以给清空按钮添加点击事件，删除localStorage中存储的表单数据，同时清空表单输入项：
// 清空按钮点击事件
clearBtn.addEventListener('click', function() {
// 删除localStorage中对应的存储项
localStorage.removeItem('userFormData');
// 清空表单所有输入项
form.reset();
alert('本地存储的表单数据已清空');
});
使用localStorage存储表单数据的注意事项
- localStorage仅能存储字符串，存储对象、数组等复杂类型时必须使用
JSON.stringify()序列化，读取时使用JSON.parse()反序列化 - 不要存储敏感信息，比如用户密码、身份证号等，因为localStorage的数据可以被同源下的任意脚本访问
- 如果表单输入项较多，建议按功能拆分存储的键名，避免单个键名存储的数据过大
- 不同浏览器之间的localStorage数据不共享，同一浏览器不同标签页同源页面可以共享localStorage数据
注意：如果需要在浏览器关闭后数据自动清除，可以使用sessionStorage替代localStorage，sessionStorage的存储周期仅存在于当前会话，关闭标签页后数据会自动清空。
localStorageHTML表单本地存储JavaScript修改时间：2026-07-14 19:42:28