历史记录与 HTML5 history

我们知道，在javascript中history作为BOM的一部分提供了浏览器的历史记录。我们可以通过方法history.back()返回上一页，history.forward()前进一页，history.go()跳转到任何页。

我们还知道，ajax可以不重载页面刷新网页局部，频繁的ajax操作让它有一个缺陷，即无法记录浏览器的历史记录，很自然我们就无法使用前进或后退键回到上一个操作的界面。像下面给出的例子，“ajax载入新闻列表”，当我们浏览了每页新闻，希望通过回到上一页，但是通过后退键是无法做到，这就是问题的所在，如何解决这个问题？

关于网页的刷新，如果只是改变当前页面url的hash则并不会造成网页的刷新，比如我们经常使用锚点跳转到网页的固定位置。所以这将是解决问题的一个切入点，而ajax局部刷新页面频繁的操作并不会改变url的hash值，这时你需要onhashchange。

onhashchange

onhashchange这个方法主要检测url的hash，一旦hash发生改变则会触发这个事件，虽然它只能兼容到ie8。对于低版本的ie，则可以采用轮询检测url的hash值然后做相应处理。

当我们切换页面链接，可以设置一个变量，然后将其作为一个对象的属性每次去存储当前页面变化区域的内容。当我们使用后退或前进键时，则url会切换到对应的hash值，hash的变化触发onhashchange这个事件，最后我们只需根据hash值获取之前对象存储的对应属性值即可。

var  $box = $(".box"), // 变化内容容器
　　　$page = $(".page"),
     $pageA = $(".page a"),
　　　iNum　＝　0,
　　  tempCon = {};	
$pageA.on("click",$page,function(){
	var index = $pageA.index($(this));
　　　　　// num 为page值
　　　　　iNum = num == 0? 0 : 3*num;
　　　　 // 存hash值对应的数据
	tempCon[iNum/3+1] = $box.html();
        ...
        return false;
})
...

// hash发生改变，读取相应的数据
window.location.hash = iNum/3+1;
$(window).bind("hashchange",function(){
	$box.html(tempCon[window.location.hash.substring(1)]);
})

HTML5 history

除了onhashchange，在html5中还定义url历史记录的api–history，简单介绍它的三个方法：

一、history.pushState(data, title, para)

这个方法主要是用户操作时，将数据存入history对象中。它有三个参数，第一个为存入history里的数据内容，第二个为新页面的标题，但测试时浏览器们都无效，因此默认填写空字符，第三个可以传入一个字符串，表示切换网页内容时url是否显示参数，如果你不想在url显示参数，则可以省略此参数。

二、replaceState(data, title, url)

此函数的操作与pushState类似，唯一的区别最后一个参数，作用为替换当前的历史记录。

三、window.onpopstate

当用户操作后退或者前进键时，会触发onpopstate事件，然后我们可以通过history.state获取对应的页面信息，方法与onhashchange类似。

var $box = $(".box"), // 变化内容容器
	$page = $(".page"),
	$pageA = $(".page a");	
$pageA.on("click",$page,function(){
	var index = $pageA.index($(this));
	// 存数据
	history.pushState($box.html(),'',index);
	dataChange(index);
	return false;
})
...

// 读数据
window.addEventListener("popstate",function(ev){
	$box.html(ev.state);
}

要注意的是，若是本地文件，html5的history api必须运行本地服务器上，并且以上操作都要在同域的情况下。而相关页面数据的改变，不仅仅针对ajax，这种技术也可以使用在用户单纯的界面操作。