JavaScript 操作 URL 参数和路由状态保持的核心是 URLSearchParams API 与 history.pushState/replaceState 配合 popstate 事件监听：读写参数同步、状态可逆、无刷新响应；封装工具函数可复用。
JavaScript 操作 URL 参数和实现路由状态保持，核心是利用 URLSearchParams API 和浏览器历史栈（history.pushState / replaceState），配合监听 popstate 事件来响应地址栏变化。关键在于参数读写要同步、状态更新要可逆、页面不刷新也能响应变化。
读取和修改 URL 查询参数
现代浏览器原生支持 URLSearchParams，操作简洁可靠：
- 获取当前参数：
const params = new URLSearchParams(window.location.search) - 读值：
params.get('page')（返回字符串，不存在则为null） - 设值：
params.set('sort', 'date')；追加：params.append('tag', 'js')；删除：params.delete('temp') - 生成新查询字符串：
params.toString()→"page=2&sort=date&tag=js"
不刷新页面更新 URL 并保存状态
用 history.pushState 添加新历史记录，或 replaceState 替换当前记录：
- 更新 URL 同时存入状态对象：
history.pushState({ page: 3, filter: 'active' }, '', `?${params.toString()}`) - 状态对象（第一个参数）会随历史项保存，但不会自动序列化到 URL，仅供 JS 使用
- 第二个参数是 title（多数浏览器忽略），第三个是新路径（可为相对路径，如
"?page=3"） - 若只想更新参数不新增历史项，用
replaceState
监听浏览器前进/后退并恢复状态
用户点击返回或调用 history.back() 时，触发 popstate 事件：
立即学习“Java免费学习笔记（深入）”；
- 绑定监听：
window.addEventListener('popstate', (e) => { console.log(e.state) }) -
e.state即之前传入pushState或replaceState的状态对象 - 在回调中解析当前
location.search，重新渲染组件或更新 UI，实现“状态保持” - 注意：初始页面加载不会触发
popstate，需手动初始化一次参数读取
封装一个轻量工具函数（可直接复用）
把常用操作聚合成一个简单工具，提升可维护性：
const URLState = {
get() {
return Object.fromEntries(new URLSearchParams(window.location.search));
},
set(obj) {
const params = new URLSearchParams(window.location.search);
Object.entries(obj).forEach(([k, v]) => v == null ? params.delete(k) : params.set(k, v));
const url = `${window.location.pathname}?${params.toString()}`;
history.replaceState({ ...this.get(), ...obj }, '', url);
},
onPop(cb) {
window.addEventListener('popstate', (e) => cb(e.state || this.get()));
}
};
使用示例：URLState.set({ page: 5, q: 'fetch' }) 更新 URL；URLState.onPop(render) 响应导航。
