通过 javascript 的 `history.replacestate()` 方法，可在不刷新页面的前提下，将输入框中的文本动态更新至 url 查询参数中，实现内容与地址栏的实时同步。
在 Web 开发中，有时需要让用户输入的内容即时反映在浏览器地址栏（URL）中，既便于分享当前状态，也利于前端路由管理或 SEO 友好性设计。例如，用户在搜索框中输入 abcd，期望地址栏自动变为 https://yoursite.com/?value=abcd —— 这并非跳转新页面，而是静默更新当前 URL，保持页面状态不变。
实现该功能的核心是利用 HTML5 History API 中的 window.history.replaceState() 方法。它允许你修改当前历史记录条目的 URL（包括查询参数），而不会触发页面重载。
以下是完整、可直接运行的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>输入同步至地址栏</title>
</head>
<body>
<form>
<label for="inputField">请输入关键词：</label>
<input
type="text"
id="inputField"
placeholder="例如：abcd"
value=""
oninput="updateAddressBar()"
>
</form>
<script>
function updateAddressBar() {
const inputValue = document.getElementById("inputField").value.trim();
// 构建安全的查询参数（避免特殊字符破坏 URL）
const encodedValue = encodeURIComponent(inputValue);
const newUrl = `?value=${encodedValue}`;
// 使用 replaceState 替换当前 URL（保留协议、域名、路径）
window.history.replaceState({}, '', newUrl);
}
// 页面加载时，若 URL 已含 value 参数，则回填输入框
window.addEventListener('DOMContentLoaded', () => {
const urlParams = new URLSearchParams(window.location.search);
const savedValue = urlParams.get('value') || '';
document.getElementById('inputField').value = decodeURIComponent(savedValue);
});
</script>
</body>
</html>✅ 关键说明：
- 使用 oninput（而非 onchange）确保实时响应每一次输入（包括粘贴、删除、中文输入法未确认等）；
- encodeURIComponent() 对输入值进行编码，防止空格、&、= 等特殊字符导致 URL 解析错误；
- replaceState() 不会添加新历史记录，适合“覆盖式”更新；若需支持浏览器后退/前进导航，可改用 pushState() 并配合 popstate 事件监听；
- 补充了页面加载时从 URL 回填输入框的逻辑，使链接可直接访问并还原状态（提升用户体验与可分享性）。
⚠️ 注意事项：
- 此方法仅修改当前页 URL 的查询字符串（?... 部分），不能修改协议（http://）、域名或路径（如 /search）；如需完整路径变更（如 /abcd），需服务端配合或使用前端路由库（如 React Router、Vue Router）；
- 浏览器地址栏显示的是相对 URL（如 ?value=abcd），完整地址取决于当前页面原始路径（例如原为 https://example.com/search，则更新后为 https://example.com/search?value=abcd）；
- 避免在 replaceState 中传入空字符串 '' 作为 title 参数（部分旧版 Safari 有兼容问题），推荐传入语义化标题如 'Search Page'。
掌握这一技巧，你就能轻松构建具备 URL 状态同步能力的搜索页、过滤器面板或配置生成器——简洁、高效、无刷新。
