html5新添加了对历史的管理，更新了history对象让管理历史状态更加方便了。在现代web应用中，用户可以通过”前进”和”后退”按钮进行历史页面的切换。这让一些不在新页面中打开的新页面前进后退自如，提高了用户体验。
通过haschange事件，可以知道url的参数什么时候发生了变化，也就是什么时候该有所反应。通过状态管理的api，能够在不加载新页面的情况下改变浏览器的url。所以需要使用history.pushstate()方法。history.pushstate()方法接收三个参数：1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)。小例子如下
javascript代码
history.pushstate({name: "menglong"}, '', "li.html");
执行了history.pushstate()方法后，新的状态信息就会被加入到历史状态栈，而浏览器地址栏也会变成新的相对url。但是，浏览器并不会想服务器发送请求，即使历史状态改变之后查新location.href也会返回与地址栏中相同的地址。另外，第二个参数目前还没有浏览器实现，所以完全可以只传入一个空字符串即可，或者一个短标题也可以。第一个参数则应该尽可能提供初始化页面状态所需的各种信息。
因为history.pushstate()方法会创建新的历史状态，所以会发现”后退”按钮也可以使用了。按下”后退”按钮，会触发window对象的popstate事件。popstate事件的事件对象有一个state属性，这个属性就包含着当初以第一个参数传递给pushstate()的状态对象。小例子如下
javascript代码
window.addeventlistener('popstate',function(ev){
var state = event.state;
if(state){ // 当第一个页面加载的时候state为空
processstate(state)
}
}, false);
得到了这个状态的对象后，必须把页面重置为状态对象中的数据表示的状态(因为浏览器不会自动为你做这些)。记住，浏览器加载的第一个页面没有状态，所以”后退”阿牛返回浏览器加载的第一个页面时，event.state值为null。
要更新当前历史状态，可以调用replacestate()，传入的参数与pushstate()方法的前两个参数相同。调用replacestate()不会在历史状态栈中创建新状态，只会重写当前状态。小例子如下
javascript代码
history.replavestate({name: "meng"}, "meng1234");
在使用html5的历史状态管理机制的时候，需要确保使用pushstate()创造的每一个”假”url，在web服务器上都有一个真的、实际存在的url与之对应。否则，单机”刷新”按钮会导致404错误。
支持html5历史状态管理的浏览器有chrome、safari 5+、firefox 4+和opera 11.5+。在safari和chrome中，传递给pushstate()或replacestate()的状态对象中不能包含dom元素。而firefox支持在状态对象中包含dom元素。opera还支持一个history.state属性，它返回当前状态的状态对象。下面就是小例子时间了，结合小例子才能更好的理解html5中的历史管理。
添加href值实现历史管理
html代码
<input type="button" value="35选7" id="input1" />
<p id="p1"></p>
javascript代码
//onhashchange : 事件 : 当hash值改变的时候触发的事件
//hash改变就会出现就会出现历史管理
window.onload = function(){
var oinput = document.getelementbyid('input1');
var op = document.getelementbyid('p1');
var obj = {};
oinput.onclick = function(){
var number = randomnum(35,7);
op.innerhtml = number;
var orn = math.random();
obj[orn] = number;
window.location.hash = orn;
};
window.onhashchange = function(){
var number = obj[window.location.hash.substring(1)] || '';
op.innerhtml = number;
};
function randomnum(alls,now){
var arr = [];
var newarr = [];
for(var i=1;i<=alls;i++){
arr.push(i);
}
for(var i=0;i<now;i++){
newarr.push( arr.splice( math.floor(math.random()*arr.length) ,1 ) );
}
return newarr;
}
};
通过html5中history对象实现历史管理
html代码
<input type="button" value="35选7" id="input1" />
<p id="p1"></p>
javascript代码
//pushstate : 三个参数：1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)
//history.pushstate({name: "menglong"}, '', "li.html");
window.onload = function(){
var oinput = document.getelementbyid('input1');
var op = document.getelementbyid('p1');
var inow = 0;
oinput.onclick = function(){
var number = randomnum(35,7);
op.innerhtml = number;
history.pushstate(number,'',inow++);
};
window.onpopstate = function(ev){ //历史管理改变，就会触发
var number = ev.state || '';
op.innerhtml = number;
};
function randomnum(alls,now){
var arr = [];
var newarr = [];
for(var i=1;i<=alls;i++){
arr.push(i);
}
for(var i=0;i<now;i++){
newarr.push( arr.splice( math.floor(math.random()*arr.length) ,1 ) );
}
return newarr;
}
};
以上就是html5实战与剖析之历史管理(history对象)的内容。