window下history对象备忘

    history是window对象的属性，它保存着用户上网的历史记录，出于安全方面的考虑，开发人员无法得知用户浏览过的URL。不过，借助用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退和前进。

一、HTML5出现 之前的 history 

history有如下方法：

1. history.go()
2. history.forward()
3. history.back()

    除了上述几个方法外，history对象还有一个length属性，保存着历史记录的数据，即所有向后和向前的记录。对于加载到窗口、标签页或框架中的第一个页面而言，history.length等于0。通过测试该属性的值，可以确定用户是否一开始就打开了你的页面。

if ( history.length == 0 ) {//这是用户打开浏览器窗口后的第一个页面}

二、HTML5出现后的history    

    在现代Web应用中，用户的每次操作不一定会打开一个全新的页面，因此“后退”和“前进”按钮也就失去了作用。HTML5通过更新history对象为管理历史状态提供了方便。

1.hashchange 事件

    HTML5新增了 hashchange 事件，以便在URL的参数列表发生变化时通知开发人员。之所以新增这个事件，是因为在Ajax应用中，开发人员经常要利用URL参数来保存状态或导航信息（这也说明Ajax的缺点之一就是无法保存状态和导航信息）。hashchange事件需要挂载到window对象上，部分浏览器支持 event 对象上的 oldURL 和 newURL 属性，它俩分别保存着参数列表发生变化前后的完整URL。但是，为了不产生兼容性问题，尽量使用 location 对象来确定当前的参数列表。

2.状态管理 API

    说三点：

• pushState() 方法
• popstate 事件
• replaceState() 方法

    除了增加了事件，HTML5还新增了状态管理 API，能够在不加载新页面的情况下改变浏览器的 URL 。为此，需要使用 history.pushState() 方法，接收三个参数：状态对象、新状态的标题和可选的相对URL。例如：

history.pushState( {name : "ghostlpx"}, "", "ghostlpx.html" );

    执行 pushState() 方法后，新的状态信息被加入历史状态栈，URL得到更新。但是，浏览器并不会真的向服务器发送请求。另外，第二个参数可以为空字符串或者一个短标题。第一个参数要提供初始化页面状态所需的各种信息，所以是对象形式。

    因为 pushState() 会创建新的历史状态，所以你会发现“后退”按钮也能使用了。按下“后退”按钮，会触发 window 对象的 popstate 事件。popstate 事件的 event 对象有一个 state 属性，它包含着前一个 URL 状态对象。

    要更新当前状态，可以调用 replaceState() ，传入的参数与 pushState() 的前两个参数相同。调用这个方法不会在历史状态栈中创建新状态，只会重写当前状态。