html5简介(8)历史详解

HTML5新增了历史的管理，用户可以通过“前进”和“后退”按钮切换历史页面。这使得一些在新页面中没有打开的新页面可以自由前后移动，提高了用户体验。

通过haschange事件可以知道URL的参数什么时候发生了变化，也就是什么时候做出反应。通过状态管理API，可以在不加载新页面的情况下更改浏览器的URL。所以需要使用history.pushState()方法。history.pushState()方法接收三个参数:1。要保存的内容2。标题(一般写空字符串)3。地址(可选)。小例子如下

执行history.pushState()方法后，新的状态信息将被添加到历史状态堆栈中，浏览器地址栏将成为新的相对URL。但是浏览器不会向服务器发送请求，即使历史状态发生变化，location.href也会返回与地址栏相同的地址。另外，第二个参数目前浏览器还没有实现，完全可以只传入一个空字符串或者一个短标题。第一个参数应该提供尽可能多的信息来初始化页面状态。

因为history.pushState()方法会创建一个新的历史状态，你会发现“后退”按钮也可以使用。按下“返回”按钮将触发窗口对象的popstate事件。Popstate事件的event对象有一个state属性，该属性包含用第一个参数传递给pushState()的state对象。小例子如下

更新状态直接更新当前地址栏的内容，不会造成逆向操作，只是简单的修改当前地址。

要更新当前的历史状态，可以调用replaceState()，传入的参数与pushState()方法的前两个参数相同。调用replaceState()不会在历史状态堆栈中创建新状态，而只会覆盖当前状态。小例子如下

在线示例:

他还是创建了一个数组，然后把生成的内容保存到数组里，然后根据传过来的值，

读取数组的相应内容。

历史的问题是第一次点击无效，只有第二次点击才能起作用。这很难受。

通常我们不需要他进行特别复杂的操作，但是hash非常好用。

Hash就是直接在url后面加一个#之后，就可以立刻被onpopstate事件检测到。

所以我们可以这样做: