可以使用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 中。
立即学习“前端免费学习笔记（深入）”；
示例代码：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
<form id="myForm">
<label>姓名：<input type="text" name="name" /></label><br>
<label>邮箱：<input type="email" name="email" /></label><br>
<label>备注：<textarea name="note"></textarea></label>
</form>
<script>
const form = document.getElementById('myForm');
const fields = ['name', 'email', 'note'];
// 恢复已保存的数据
fields.forEach(name => {
const saved = localStorage.getItem(name);
if (saved) {
const field = form.elements[name];
field.value = saved;
}
});
// 实时保存输入内容
form.addEventListener('input', (e) => {
const { name, value } = e.target;
if (fields.includes(name)) {
localStorage.setItem(name, value);
}
});
</script>
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 适合保存非敏感、轻量级的用户输入数据，比如表单草稿。注意不要用于存储密码、身份证等敏感信息。
