本文介绍如何利用 JavaScript 的 history.pushState 方法在不刷新页面的情况下修改浏览器地址栏 URL。通过示例展示如何存储状态对象、标题及新 URL，并配合 popstate 事件监听器处理后退按钮点击，实现单页应用中的历史状态管理与数据读取。
JavaScript 修改 URL 地址栏概述
现代浏览器支持一项实用功能，允许开发者在不刷新页面的前提下修改地址栏中的 URL。在浏览过程中，系统会记录浏览历史。当用户点击浏览器的后退按钮时，可以从历史记录中获取回退信息。这一功能实现起来并不复杂，接下来我们将通过代码示例来演示其工作原理。
pushState 方法基础用法
具体实现代码如下：
var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);History 对象的 pushState() 方法接收三个参数，如上例所示。第一个参数是一个 JSON 对象，用于存储与当前 URL 相关的任意历史信息；第二个参数是 title，用于传递文档标题；第三个参数是 newUrl，用于指定新的 URL 地址。执行后，浏览器地址栏会显示新 URL，而当前页面内容不会刷新。
存储历史状态与 popstate 事件处理
接下来看一个具体示例，我们将在每个独立的 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);
}运行上述代码并点击浏览器返回按钮，可以观察到 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”的值。 它是非常的简单和有趣，不是吗？ 英语原文： http://hasin.me/2013/10/16/manipulating-url-using-javascript-without-freshing-the-page/