data-*属性不能直接存储表单数据，必须经javascript序列化为json字符串后写入，且仅适用于轻量、临时、单页内的状态暂存；恢复需手动解析并逐字段回填，注意checkbox/radio状态及disabled元素处理。
data-* 属性不能直接存表单数据，得靠 JavaScript 中转
HTML 的 data-* 属性本身只是字符串容器，不支持对象、数组或实时同步。你不能把 form.elements 直接塞进 data-form-state 里——浏览器会自动 toString() 成 [object HTMLFormControlsCollection]，毫无意义。
真正可行的路径是：用 JavaScript 序列化表单字段 → 存成 JSON 字符串 → 写入 data-*；恢复时反向操作。这个过程必须手动触发，比如在离开页面前或输入时 debounced 保存。
- 只适合轻量、临时、单页内的暂存（如 modal 表单未提交就切 tab）
- 不要用于敏感数据（
data-*在 DOM 中明文可见） - 避免存大文件或 Base64 图片，会显著拖慢 DOM 渲染和查询速度
-
data-*值变更不会触发事件，所以监听input或change必须由 JS 主动绑定
怎么序列化并写入 data-form-state
推荐用 FormData + Object.fromEntries() 提取键值，再 JSON.stringify() 后存入。注意过滤掉空值和 file 类型 input（它们无法被 JSON 化）：
function saveFormToDataAttr(form) {
const data = {};
for (const el of form.elements) {
if (!el.name || el.type === 'file') continue;
if (el.type === 'checkbox' || el.type === 'radio') {
if (el.checked) data[el.name] = el.value;
} else {
data[el.name] = el.value;
}
}
form.dataset.formState = JSON.stringify(data);
}
调用时机建议放在 form.addEventListener('input', ...) 或 debounce(() => saveFormToDataAttr(form), 300)，避免高频写入 DOM。
怎么从 data-form-state 恢复表单值
读取后需严格校验 JSON 格式，并逐字段回填。特别注意 checkbox/radio 的 checked 状态必须显式设置，不能只设 value：
function restoreFormFromDataAttr(form) {
const json = form.dataset.formState;
if (!json) return;
let state;
try {
state = JSON.parse(json);
} catch (e) {
console.warn('Invalid data-form-state JSON', e);
return;
}
for (const [name, value] of Object.entries(state)) {
const els = form.elements[name];
if (!els) continue;
if (els.length === undefined) {
// 单个元素（input、textarea）
if (els.type === 'checkbox' || els.type === 'radio') {
els.checked = els.value === value;
} else {
els.value = value;
}
} else {
// NodeList（同 name 多个 radio）
for (const el of els) {
if (el.type === 'radio' && el.value === value) {
el.checked = true;
}
}
}
}
}
常见坑：dataset.formState 是只读字符串，不能直接赋值对象；恢复时没处理 disabled/readonly 元素导致赋值静默失败；radio 组没清空默认选中项就直接设新值，造成状态错乱。
比 data-* 更稳的替代方案有哪些
如果目标是跨导航暂存（比如用户跳转到其他页面再返回），data-* 完全失效——它只活在当前 DOM 节点生命周期里。这时候该换方案：
- 短时效：用
sessionStorage，页面关闭即销毁，API 简单且容量大（≈5MB） - 需持久：用
localStorage，但记得加前缀隔离（如myapp-form-draft-123）并手动清理过期项 - 复杂交互：配合
history.state+popstate，适合 SPA 路由级暂存 - 服务端兜底：关键表单应设计“草稿保存”接口，前端定期 POST 到后端，data-* 只作本地 fallback
data-* 的真实定位是「DOM 元素上下文元信息」，不是存储介质。把它当临时便签可以，当成数据库用，迟早掉坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
