可以使用localStorage保存表单数据实现页面刷新后仍保留内容。首先通过input事件实时监听用户输入，利用localStorage.setItem()将每个字段值存储为字符串；页面加载时用localStorage.getItem()读取并恢复数据。对于多字段表单，推荐将所有数据封装为对象，通过JSON.stringify()转为字符串后统一存储，加载时再JSON.parse()解析还原。表单提交成功后可调用localStorage.removeItem()或clear()清除缓存数据。注意localStorage仅适用于非敏感信息如表单草稿，不可用于存储密码等私密内容。
HTML表单数据可以通过浏览器的 localStorage 进行本地存储，这样用户填写的内容可以在页面刷新或关闭后依然保留。下面介绍如何使用 localStorage 保存和读取表单数据。
1. localStorage 简介
localStorage 是 HTML5 提供的一种本地存储方式，数据不会随页面关闭而丢失，除非手动清除浏览器缓存或通过代码删除。
它只能存储字符串类型的数据，如果要存储对象，需要使用 JSON.stringify() 转换为字符串，读取时再用 JSON.parse() 解析回来。
2. 监听表单输入并实时保存
可以通过监听表单元素的 input 事件，将用户输入的内容实时保存到 localStorage 中。
立即学习“前端免费学习笔记（深入）”；
示例代码：
3. 提交表单后清除存储（可选）
如果希望在表单成功提交后清除本地保存的数据，可以在提交事件中调用 localStorage.removeItem() 或 localStorage.clear()。
示例：
form.addEventListener('submit', (e) => {
e.preventDefault();
// 此处可执行提交逻辑
// 清除已保存的草稿
fields.forEach(name => {
localStorage.removeItem(name);
});
alert('提交成功，本地数据已清除');
});
4. 存储整个表单对象（推荐复杂场景）
对于字段较多的表单，可以统一用一个对象存储，避免重复调用 setItem。
示例：
// 使用一个键存储所有数据
const FORM_DATA_KEY = 'userForm';
// 保存所有字段
function saveFormData() {
const data = {};
fields.forEach(name => {
data[name] = form.elements[name].value;
});
localStorage.setItem(FORM_DATA_KEY, JSON.stringify(data));
}
// 页面加载时恢复数据
function loadFormData() {
const saved = localStorage.getItem(FORM_DATA_KEY);
if (saved) {
const data = JSON.parse(saved);
fields.forEach(name => {
if (data[name]) {
form.elements[name].value = data[name];
}
});
}
}
// 绑定事件
form.addEventListener('input', saveFormData);
window.addEventListener('load', loadFormData);
基本上就这些。localStorage 适合保存非敏感、轻量级的用户输入数据，比如表单草稿。注意不要用于存储密码、身份证等敏感信息。
