html5之history对象理解

history对象之pushState，replaceState
浏览器有一个history对象，用来保存浏览历史，用户能够经过点击浏览器的后退或前进按钮在历史记录中切换。以前对history的操做的API主要是前进、后退、跳转等，而在HTML5中提供了2个新方法来管理history。

history.pushState(state, title, url);
history.replaceState(state, title, url);

参数说明

• state：一个与指定历史记录相关联的状态对象，当popstate事件触发时，会把该对象传入回调函数。若是不须要用到，能够传null。
• title：页面的标题。但当前大多数浏览器都不支持或忽略这个值。能够传null。
• url：添加或修改的history的网址。为了安全性，必须保持与当前URL同一个域。

简而言之，两个方法的区别只是pushState添加一个最新的历史记录，而replaceState则是把当前的页面的历史记录替换掉。他们最大的特色是添加或替换历史记录后，浏览器地址栏会变成你传的地址，而页面并不会从新载入或跳转。

例如，假设当前的页面地址是example.com/1.html，且history中此时只有一条当前页面的记录。

• 当你执行 history.pushState(null, null, “2.html”)后，浏览器的地址栏会显示example.com/2.html，但并不会跳转到2.html，甚至并不会去检查2.html存不存在，只是加入一个最新的历史记录项。此时history中会有两个记录。假如你此时点击页面上的link跳转到另一个页面后，点击浏览器的后退按钮，则url会变成example.com/2.html，若是此前的1.html的页面浏览器有缓存的话会显示1.html的内容，不然会发起请求example.com/2.html。若是再次点后退，url会变成example.com/1.html。
• 而若是执行 history.replaceState(null, null, “2.html”)的话，浏览器的地址栏也会显示example.com/2.html，区别是history中只有当前2.html的记录，而1.html的记录已被替换掉。

利用这些特性，能够用来修改当前页面的URL来达成某些目的，好比能够用来记住搜索条件。

若是页面是数据展现的页面，页面上有一些搜索或过滤的条件，当用户点击这些条件时，页面经过AJAX把结果呈现到页面上，当点击某个结果页面跳转到下一个页面后，用户点击浏览器的后退按钮回到前一个页面后，即便页面有缓存，AJAX获取的结果也不会保留在页面上。若是后退后，须要记住此前的搜索条件和结果，能够在用户点击搜索条件时，把搜索条件利用history.replaceState添加到页面的query string中。

if (history.replaceState) {
    history.replaceState(condition, null, "?" + $.param(condition, true));
}

页面能够设置成no-cache，当用户后退时，浏览器会从新请求带搜索条件的URL，后台根据搜索条件，把对应的结果页面呈现出来，从而达到记住搜索条件和结果的目的。