使用 JavaScript 修改浏览器 URL 地址栏的实现代码

JavaScript 修改 URL 地址栏概述

现代浏览器支持一项实用功能，允许开发者在不刷新页面的前提下修改地址栏中的 URL。在浏览过程中，系统会记录浏览历史。当用户点击浏览器的后退按钮时，可以从历史记录中获取回退信息。这一功能实现起来并不复杂，接下来我们将通过代码示例来演示其工作原理。

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/