HTML5新特性history

history

1、history.pushState()

2、history.replaceState(）

replace比起push的差异在于，push是进栈把当前页面放在栈中，但是replace是会直接取代当前页面。

 

3、history.go()

        history.back() 等价于 history.go(-1)

        history.forward() 则等价于 history.go(1)

        这三个接口等同于浏览器界面的前进后退。

 

 4. length

 history.length属性保存着历史记录的url数量，初始时该值为1，如果当前窗口先后访问了三个网址，那么history对象就包括3项，history.length=3

 5.history.scrollRestoration

history.scrollRestoration = 'manual';关闭浏览器自动滚动行为
history.scrollRestoration = 'auto';打开浏览器自动滚动行为(默认)

 2、URL的hash

URL的hash也就是锚点(#), 本质上是改变window.location的href属性.

我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新

 

此时页面刷新，然后

改变#不触发网页重载单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。

比如，从

http://www.example.com/index.html#location1

改成

http://www.example.com/index.html#location2

浏览器不会重新向服务器请求index.html。

3、区别 

区别一：

生产环境下：两者无区别

开发环境或者测试环境下：

hash：前进和后退正常，刷新页面正常

history：前进和后退正常，刷新页面会报错，报错可能有两种结果：一种是404报错，一种是直接把没有处理的数据展示到页面

history报错的原因：刷新页面，就走后端路由，如果后边没有该路由，就是404，如果有该路由，会直接数据展示

区别二：原理不同

hash采用的是window.οnhashchange=()=>{}来实现的

history采用的是HTML5新增的interface里面的pushState()和replaceState()，不兼容ie6~8

建议：工作中用hash,如果要用history，需要与后端人员配合，有冲突的路由优先前端