H5历史状态管理问题——后退前进按钮的重新使用

问题：现代Web应用中，用户的每次操作都不一定打开一个新的页面，但此时页面的“后退”和“前进”按钮就失去了作用，用户很难在不同状态间切换。

解决方法：hashchange事件

 

H5通过更新history对象添加历史状态。

 

效果：通过历史状态管理API，能够在不加载新页面的情况下改变浏览器的URL。

过程：

1、使用history.pushState()创建新的历史状态，但浏览器不会真的向服务器发送请求。
接收三个参数：状态对象、新状态标题、可选的相对URL
语法：history.pushState({...},title,url)
参数一：尽可能提供初始化新页面所需的各种信息。
2、按下“后退”按钮，触发window对象的popstate事件；其事件对象有一个state属性，包含着pushState()的第一个参数：状态对象。
代码：
3、更新当前状态，用replaceState()，传入的参数与pushState()的前两个参数相同。
此方法不会在历史状态栈中新建状态，而是重写当前状态。
语法：history.replaceState({...},title)