url的操作之pushState、replaceState和popstate

上一节我们说地址栏跳转的时候，谈到了浏览器会缓存用户访问url序列，我们可以通过浏览器的前进后退按钮或者通过js提供的方法，访问这个序列里的url，不过关于这一点上一节我们只说了window.history.go，这里补充两个方法。

补充一点，这些全局方法都是挂在window对象下的，所以下面方法中的window都可以省略，比如window.location，直接写location即可，不过以防变量名冲突，本文中还是会加上window。

window.history.back()

这个方法的作用为返回上一页，相当于浏览器的后退按钮，和window.history.go(-1)达成的效果是一样的。

window.history.forward()

window.history.forward()的作用和window.history.back()的作用相对应，就是前往下一页，相当于浏览器的前进按钮，和window.history.go(1)达成的效果是一样的。

history.pushState()

history.pushState()接收三个参数，用法如下

history.pushState(state, title[, url])

state

暂时没搞懂，直接复制官方原话吧，状态对象是一个JavaScript对象，它与pushState()创建的新历史记录条目相关联。 每当用户导航到新状态时，都会触发popstate (en-US)事件，并且该事件的状态属性包含历史记录条目的状态对象的副本。

title

相当于页面标题吧，不过目前并没有什么卵用，可以忽略

url

这个当然就是我们主要使用的了，一个url，使用此方法之后，这个url将出现在地址栏中。

说完了用法，那这个方法的作用是什么呢？前面我们说了，history会缓存一个用户访问的url序列，跳转页面时候，就会往这个序列里添加一个新的url，其实这个方法的作用也是添加一个url，并展示在状态栏，只不过不是立即跳转的，当你使用它的时候，它只会将目标url添加到序列中，并且出现在地址栏中，但并不会立即加载并跳转到这个页面，但如果你访问了新的页面，点击返回按钮的时候，或者在当前页面刷新时，浏览器就会加载并跳转到你新添加的这个url。不过，需要注意的是，这个方法并不能跳转到站外，它只能跳转到本站的地址（同域名下）。

打开任意网页，在控制栏输入下面的代码，看看地址栏发生了什么变化，这时候页面是不是没有发生变化，然后你再点击刷新按钮试一下

history.pushState({}, 'title', '/user')

history.replaceState()

不同于pushState，replaceState不是往序列里添加，而是修改了当前的url，就像location.href和location.replace的区别一样。利用此特性，我们可以动态的修改地址栏的参数，以便在用户下次刷新时候发生不一样的效果，比如我们从其他页面跳转到此页面时会携带一个标识性的参数，我们用完这个参数后可以删除这个参数，以便显示此页面的默认显示内容。

popstate

popstate类似于一个事件函数，当用户在浏览器点击后退、前进，或者在js中调用histroy.back()，history.go()，history.forward()等，会触发popstate事件；但pushState、replaceState不会触发这个事件。利用这一特性，我们可以在用户前进或者返回页面的时候做一些事情。