表单提交后数据不发请求而存入localstorage，需拦截submit事件、用formdata提取字段并json.stringify后存储；读取时json.parse还原并赋值，注意radio/checkbox需设checked，敏感字段不应存储。
表单提交后数据不发请求，只存到 localStorage
直接用 submit 事件拦截默认行为，手动提取表单字段写入 localStorage 即可。关键不是“提交到本地存储”，而是“阻止真实提交 + 主动存值”。浏览器原生表单没有 action="localstorage://" 这种语法，必须靠 JS 干预。
怎么从表单快速获取所有字段值（含 name 属性）
别手写 getElementById 一个一个取 —— 利用 FormData 构造函数能自动解析表单结构，再转成普通对象：
const form = document.querySelector('form');
form.addEventListener('submit', e => {
e.preventDefault();
const data = Object.fromEntries(new FormData(form));
localStorage.setItem('formData', JSON.stringify(data));
});
注意点：
-
FormData只收集有name属性的控件（input、select、textarea），没name的会被忽略 - 多选
select或多个同名checkbox会只取最后一个值；如需全部，得手动遍历form.elements -
JSON.stringify是必须的 ——localStorage只接受字符串，直接存对象会变成[object Object]
提交后如何读取并还原表单（比如页面刷新后恢复）
读取时用 JSON.parse 转回对象，再逐个赋值给对应 name 字段：
const saved = localStorage.getItem('formData');
if (saved) {
const data = JSON.parse(saved);
Object.entries(data).forEach(([name, value]) => {
const el = form.elements[name];
if (el) el.value = value;
});
}
但要注意：
-
form.elements[name]对radio和checkbox不直接生效 —— 它们需要匹配value并设checked = true - 如果表单结构后续改了（比如删掉某个
name），旧数据里残留的字段会静默忽略，不会报错 - 敏感字段（如密码）不该存 ——
localStorage是纯文本、无加密、同源任意脚本都可读
为什么不用 sessionStorage 或 IndexedDB？
看场景：sessionStorage 页面关闭就丢，适合临时草稿；localStorage 持久但容量小（通常 5–10MB）、阻塞主线程、无法存函数或日期对象；真要存大量/结构化数据（如带附件的表单），得上 IndexedDB，但它没 localStorage 那么直白 —— 比如存一个对象还得建库、建表、开事务。
多数表单缓存需求，localStorage + FormData 组合已经够用。真正容易被忽略的是：用户清空浏览器数据时，这些内容会连带消失，且不同浏览器对 localStorage 的清理策略不一致 —— 别把它当数据库用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
