本文介绍如何使用 HTML5 History API 中的 pushState 方法，在不刷新页面的情况下修改浏览器地址栏 URL 并存储历史状态。通过监听 popstate 事件，开发者可以捕获用户点击后退或前进按钮时的状态变化，从而读取存储的状态对象并执行相应逻辑，实现单页应用中的导航体验优化。
History API 实现无刷新 URL 修改
现代浏览器提供了一个实用功能：无需刷新页面即可修改 URL。在浏览过程中，系统会记录浏览历史。当用户点击浏览器后退按钮时，可以从历史记录中获取回退信息。这一功能看似简单，但可以通过代码实现其具体工作机制。
var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);
History 对象的 pushState() 方法包含三个参数。第一个参数是 JSON 对象，用于存储与当前 URL 相关的任意历史信息；第二个参数是 title（标题），通常传递文档标题；第三个参数是新的 URL 字符串。调用该方法后，浏览器地址栏会显示新 URL，而当前页面不会发生刷新。
以下示例展示了如何在每个独立的 URL 中存储一些任意数据。
for(i=0;i<5;i++){
var stateObject = {id: i};
var title = "Wow Title "+i;
var newUrl = "/my/awesome/url/"+i;
history.pushState(stateObject,title,newUrl);
}
监听 popstate 事件处理历史状态
运行代码后，点击浏览器的返回按钮，可以观察到 URL 的变化。每次 URL 改变是因为系统存储了历史状态中的 “id” 及其对应值。那么，如何重新获取这些历史状态，并在此基础上执行特定操作呢？我们需要为 “popstate” 事件添加监听器，该事件会在历史对象状态每次发生改变时触发。
for(i=0;i<5;i++){
var stateObject = {id: i};
var title = "Wow Title "+i;
var newUrl = "/my/awesome/url/"+i;
history.pushState(stateObject,title,newUrl);
alert(i);
}
window.addEventListener('popstate', function(event) {
readState(event.state);
});
function readState(data){
alert(data.id);
}
此时，无论何时点击返回按钮，都会触发 “popstate” 事件。我们的事件监听器随后会检索与该历史状态对象关联的 URL，并提示 “id” 的值。
整个过程非常简洁且有趣，不是吗？