JavaScript不刷新实现浏览器的前进后退功能

最近在学习backbone，学习理解backbone就要先理解spa，理解spa就要先了解单页面应用是如何做到页面不刷新改变url的。

相较于不同页面的跳转，AJAX可以说大大提高了用户的浏览体验，不用看到页面切换之间的白屏是件很惬意的事情。但是很多早先的AJAX应用是不支持浏览器的前进后退的，这导致了用户不管在网站里浏览到何处，一旦刷新就会立刻回到起初的位置，并且用户也无法通过浏览器的前进后退按钮来实现浏览历史的切换。

对于第一个问题，解决还算容易，只要用cookie或者localStorage来记录应用的状态即可，刷新页面时读取一下这个状态，然后发送相应ajax请求来改变页面即可。但是第二个问题就很麻烦了，先说下现代浏览器的解决方案。

HTML5 解决方案

要了解HTML5如何实现前进后退，就要先了解下history对象和location对象。

history对象

History 对象属性

1.length：返回浏览器历史列表中的URL数量，用户在当前标签每访问一个页面，此数量加1。因为隐私原因，URL具体内容不可见。
2.state：与当前网址相关的对象，只能通过pushState和replaceState添加或修改。我们可以可以用它来存储跟url有关的信息。

History 对象方法

1.history.back()

此方法无参数，触发后会返回前一个浏览的页面，相当于点击了浏览器的后退按钮。

2.history.forward()

此方法无参数，触发后会返回后退前浏览的页面，相当于点击了浏览器的前进按钮。

3.history.go(number)

此方法接受一个整形变量参数，history.go(-1)相当于后退一页，history.go(1)相当于前进一页，history.go(0)会刷新当前页面。

4.history.pushState(state, title, url)

改变url且不刷新页面的关键就是它了，此方法会改变当前页面的location.href并且修改当前的history.state对象，执行后history.length会增加1。此方法接受三个参数，

1.state：当前网址相关的对象。
2.title：页面标题，但是所有浏览器都忽略它，要改变标题还是要用document.title。
3.url：一个与当前页面同域的网址，location.href会变成此值。

5.history.replaceState(state, title, url)

此方法同上，但是它不会改变history.length，只会修改当history.state和location.href。

注意pushState和replaceState第三个参数不可跨域，并且不会触发浏览器的popstate事件和onhashchange事件(chrome33下测试)。

location对象

除了点击前进/后退按钮和history事件，还可以通过location的方法和修改location的属性来改变Url：

location对象的属性(读写)：

1.host:域名+端口号
2.hostname:域名
3.port:端口号
4.protocol:协议
5.href：完整路径
6.origin：协议+域名+端口
7.hash：井号 (#) 开始的 URL(hash)