本文介绍使用 localstorage 在页面间持久化存储表单数据，并在加载时自动填充目标表单，适用于落地页展示历史记录后“点击添加”回填至编辑表单的典型场景。
本文介绍使用 localstorage 在页面间持久化存储表单数据，并在加载时自动填充目标表单，适用于落地页展示历史记录后“点击添加”回填至编辑表单的典型场景。
在 Web 应用中，常需实现「落地页（Landing Page）展示历史提交记录 → 用户点击某条记录的「添加」或「编辑」按钮 → 跳转/弹窗打开表单页并自动填充对应字段」这一交互流程。该需求无需后端服务即可通过浏览器原生 API 高效完成，核心方案是利用 localStorage 持久化保存结构化数据，并在表单页加载时读取并赋值。
✅ 基础实现原理
- 数据存储：用户在落地页选择某条记录后，将其关键字段（如姓名、姓氏、年龄）序列化为 JSON 字符串，存入 localStorage（键名可自定义，如 'formData'）；
- 数据回填：目标表单页（即编辑页）在 window.onload 时读取该键值，解析 JSON 并逐个写入对应 的 value 属性；
- 兼容性与限制：localStorage 同源可用、永久存储（除非手动清除）、最大容量约 5–10MB，且仅支持字符串——因此必须配合 JSON.stringify() / JSON.parse() 使用。
? 完整可运行示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单数据回填示例</title>
<script>
// 页面加载时：从 localStorage 读取并填充表单
window.onload = function() {
const stored = localStorage.getItem('formData');
if (stored) {
try {
const data = JSON.parse(stored);
document.getElementById('name1').value = data.name1 || '';
document.getElementById('lastname').value = data.lastname || '';
document.getElementById('age').value = data.age || '';
} catch (e) {
console.warn('localStorage 中 formData 格式错误：', e);
}
}
};
// 提交按钮点击时：保存当前表单数据到 localStorage
function saveFormData() {
const name1 = document.getElementById('name1').value.trim();
const lastname = document.getElementById('lastname').value.trim();
const age = document.getElementById('age').value.trim();
// 简单校验（生产环境建议增强）
if (!name1 || !lastname) {
alert('请填写姓名和姓氏！');
return;
}
const formData = { name1, lastname, age };
localStorage.setItem('formData', JSON.stringify(formData));
alert('✅ 数据已保存，刷新页面将自动回填！');
}
</script>
</head>
<body>
<h2>用户信息表单</h2>
<form>
<label>姓名：<input type="text" name="name1" id="name1" placeholder="请输入姓名"></label><br><br>
<label>姓氏：<input type="text" name="lastname" id="lastname" placeholder="请输入姓氏"></label><br><br>
<label>年龄：<input type="number" name="age" id="age" placeholder="请输入年龄"></label><br><br>
<input type="button" value="保存至 localStorage" onclick="saveFormData()">
</form>
</body>
</html>⚠️ 关键注意事项
- 安全性提醒：localStorage 数据可被前端任意脚本读写，切勿存放敏感信息（如密码、token、身份证号）；
- 跨页面协作：落地页需在用户点击「添加」时执行 localStorage.setItem(...)；本示例中假设该动作已在前序页面完成。若需跳转后回填，确保两页同源且键名一致；
- 数据清理：建议在表单提交成功（如通过 AJAX 发送到服务器）后调用 localStorage.removeItem('formData')，避免残留旧数据干扰后续操作；
- 健壮性增强：实际项目中应增加 try...catch 处理解析异常、空值容错、输入类型校验（如 age 应为数字），并考虑使用 sessionStorage 替代（关闭标签页即失效）以满足临时场景需求。
通过上述方法，你可以在纯前端环境下高效实现表单数据的跨页面传递与自动填充，显著提升用户体验与开发效率。
