表单提交后清空地址栏参数应使用history.replaceState()替换当前URL或跳转至无参页；POST场景须服务端PRG重定向；禁用自动填充、手动重置表单值并确保框架状态同步。
表单提交后自动清空浏览器地址栏参数（GET 场景）
如果表单是 method="get"，提交后 URL 会带上查询参数（如 ?name=abc&email=test%40example.com），刷新页面会重复提交。这不是“历史记录”本身的问题，而是浏览器缓存了带参的 URL。
解决思路不是删除 history，而是避免让带参 URL 成为当前有效地址：
- 提交后用
history.replaceState()替换当前条目，抹掉查询参数：form.addEventListener('submit', function(e) { e.preventDefault(); fetch(this.action + '?' + new URLSearchParams(new FormData(this))) .then(() => history.replaceState(null, '', location.pathname)); }); - 更稳妥的做法是提交后跳转到无参页：
location.href = location.pathname，但需确保服务端已处理成功，否则用户看到空白页 - 注意：不能用
history.back()或history.go(-1)，这会回到上一页，且可能触发重复提交
阻止表单重复提交（POST 场景下的“历史记录”错觉）
用户点击“后退”再点“刷新”，浏览器常弹出“要重新提交表单吗？”——这不是真的保留了历史记录，而是浏览器对 POST 请求的保护机制（HTTP 302 后未重定向导致状态残留）。
正确解法是服务端遵循 PRG 模式（Post-Redirect-Get）：
立即学习“前端免费学习笔记（深入）”；
- 表单
method="post"提交后，服务端处理完必须返回303 See Other或302 Found，并带Location: /success响应头 - 前端无需额外 JS 清除 history；一旦重定向完成，当前 history 条目就是
/success，刷新不会重发 POST - 若用 AJAX 提交 POST，务必在
.then()中手动跳转：location.assign('/success')，而不是只更新 DOM
不推荐但偶尔被问到的 history.pushState() / history.replaceState() 误用
有人想用 history.pushState(null, '', '/') 在提交后“覆盖”历史，这是危险操作：
-
pushState会新增一条历史记录，反而让“后退”更混乱；replaceState才是正确选择，但它只改当前项，不删记录 - 无法清除整个 history 栈——浏览器禁止网页脚本删除用户历史，这是安全限制，任何 JS 都做不到
- 调用
history.go(-1)后立即replaceState，可能因异步时机问题失效，且破坏用户预期 - Chrome/Firefox 对 history API 的调用有频率限制，频繁操作可能被静默丢弃
真正需要关注的：表单控件值残留与自动填充干扰
用户以为“历史没清”，其实常是浏览器自动填充或表单控件的 value 未重置，和 history 无关：
- 提交后手动清空字段：
form.reset()（注意：它只重置到初始value，若初始值非空，得先设input.value = ''再reset） - 禁用自动填充可加
autocomplete="off"到<form></form>或具体<input>，但现代浏览器对密码类字段可能忽略此设置 - 某些框架（如 React）中，受控组件未同步 state，会导致 UI 看似没清——必须确保
onChange和提交后setState({})同时到位
最易被忽略的是：开发时本地测试用 file:// 协议打开 HTML，此时 history.replaceState 会失败（跨源限制），而服务器环境正常——务必在 http:// 下验证。
