最可靠方式是监听表单 submit 事件并用 localstorage 持久化计数，统一处理回车、辅助技术等提交方式，按 form id 或 data-count-key 隔离多表单，服务端需幂等校验。
怎么用 JavaScript 监听表单提交并计数
直接在 submit 事件里加计数器最可靠，别碰 click 按钮——用户可能回车提交、屏幕阅读器跳过按钮、或者禁用 JS 后按钮无效但表单仍能提交。
常见错误是把计数逻辑写在按钮 onclick 里，结果回车提交不触发；或者没阻止默认行为就提前计数，导致重复提交时多算一次。
- 给
<form></form>绑定addEventListener('submit', ...)，不是按钮 - 计数前先调用
event.preventDefault()（如果后续要手动发请求） - 计数变量建议挂到
window或模块级作用域，避免闭包或重渲染丢失 - 如果表单有多个提交入口（如“保存”“另存为”），统一走表单 submit 事件，别分散监听
const form = document.querySelector('form');
let submitCount = 0;
form.addEventListener('submit', (e) => {
e.preventDefault();
submitCount++;
console.log('已提交', submitCount, '次');
// 这里再发 fetch 或 submit()...
});
刷新后计数清零？用 localStorage 持久化
页面一刷新，JS 变量就归零。要跨刷新保留次数，localStorage 是最轻量且兼容性最好的选择，不用引入任何库。
容易踩的坑是：只读不写、没做类型转换（localStorage 只存字符串）、或没处理 null 初始值。
立即学习“前端免费学习笔记（深入）”；
- 读取时用
parseInt(localStorage.getItem('formSubmitCount')) || 0 - 每次更新后立刻写入：
localStorage.setItem('formSubmitCount', count.toString()) - 注意同源限制：不同协议、端口、子域名之间互不可见
- 不要存敏感信息——
localStorage可被任意 JS 读取
多个表单共用一个计数器？按 form ID 区分存储
一个页面有登录表单、反馈表单、订阅表单，全混在一个计数里没意义。得靠 form.id 或自定义 data-count-key 做隔离。
硬编码多个变量名（如 loginCount、feedbackCount）后期难维护；全用同一个 key 又会互相覆盖。
- 推荐方案：用
form.getAttribute('data-count-key') || form.id || 'default'生成 key - key 示例：
localStorage.setItem('submit_count_contact_form', '3') - 确保每个
<form></form>有唯一标识，没 id 就加data-count-key="contact" - 服务端验证时别依赖这个计数——它纯前端，可被用户篡改
要不要上报到后端？避开重复提交和竞态问题
如果真需要服务端记录（比如防刷、运营统计），前端计数只是辅助，核心逻辑必须放在后端。但上报本身容易出问题：用户连点、网络重试、页面未卸载就关闭，都可能导致重复计数。
关键不是“怎么发请求”，而是“怎么让多次请求只算一次”。
- 前端发请求时带上唯一
submissionId（用crypto.randomUUID()或时间戳+随机数） - 后端用该 ID 做幂等判断（Redis SETNX 或数据库唯一索引）
- 别用表单序列化结果当 ID——内容可能相同但提交意图不同
- 上报失败时不盲目重试，优先保证用户体验，异步补报更稳妥
复杂点在于：前端计数只是快照，真实提交成功与否，得等后端响应确认。别把“调用了 fetch”当成“已提交”。
