HTML5中的history API的理解和使用

　　现在前端框架层出不穷，大大的方便了咱们日常工做中的开发，提升了开发的效率，然而，在使用框架的过程当中仍是颇有必要了解其中一些本身感兴趣的功能的原生js实现方式。

　　我一直对现在一些框架的路由感兴趣，今天就来说讲我在前端路由的学习心得。

　　何为路由？个人理解是在不刷新页面的状况下，经过更改页面的url来执行不一样的程序操做，常见的前端路由实现方式有：

　　　　　　　　1，经过hash实现（在url后面加入#+路由名），使用hash实现路由的方式仍是很常见的，一些比较火的前端框架中的路由都是经过hash实现，例如：AngularJS。hash实现路由的好处就是兼容性比较好，兼容IE8，很差的地方就是不太美观的 "#"。

　　　　　　　　2，经过HTML5中historyAPI实现，historyAPI是HTML5中，在老版本的history中优化了一些新的方法和属性，经过“/***”的方式添加路由，缺点就是兼容性问题了，毕竟是HTML5中新加的东西，随着浏览器的不断发展，相信各大浏览器厂商都会实现对该API的实现。

 

下面正式开始看看H5中的historyAPI：

　　属性：

　　　　length：当前窗口的历史记录条数。

　　　　scrollRestoration：容许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性能够是自动的（auto）或者手动的（manual）。

　　　　state：返回一个表示历史堆栈顶部的状态的值。这是一种能够没必要等待popstate 事件而查看状态而的方式。

　　方法：

　　　　back()：回到上一条历史记录，若是当前位置已是开始的历史记录，则无效果，也不会报错。

　　　　forward()：前往下一条历史记录，若是当前位置已是最后一条历史记录，则无效果，也不会报错。

　　　　go(num)：前进或回退指定num条历史记录，当num为负数的时候，表示回退num条历史记录，当num为大于0的数时，表示前进num条历史记录。

　　　　pushstate(state,title,url)：向历史记录中添加一条记录。

　　　　　　　　state：存储json格式的数据，存储的时间能够在下面的popstate事件中获取到，也能够用state属性获取到。

　　　　　　　　title：添加或修改的历史记录的标题，可是如今全部的浏览器都会忽略这个参数。

　　　　　　　　url：添加或修改的历史记录的地址，用于更新浏览器的地址栏，并不在意URL是否已经存在地址列表中。更重要的是，它不会从新加载页面。

　　　　replaceState(state,title,url)：替换当前历史记录的值，参数与pushstate方法一致。

　　事件：

　　　　popstate：当切换历史记录的时候触发，即便用go()，forward()，back()方法或使用浏览器的前进后退按钮时会触发，而pushstate()与replacestate()方法则不会触发该事件。

 

使用场景：

　　在使用ajax请求数据，而后绘制到页面时，使用页面功能时，浏览器的前进后退按钮是没有用的，这样用户体验很很差，并且也不利于SEO，使用historyAPI则能够优化这一现象。