大家好，又见面了，我是全栈君
HTML5新进入历史的管理，更新history对象允许国家的经营历史更方便。
在现代Web应用。用户”前进”和”退却”button切换历史页面。这使得新的页码不会打开一个新的网页前进和后退自如，改善用户体验。
经haschange事件，可以知道URL的參数什么时候发生了变化，也就是什么时候该有所反应。
通过状态管理的API，可以在不载入新页面的情况下改变浏览器的URL。所以须要使用history.pushState()方法。
history.pushState()方法接收三个參数：1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)。小样例例如以下
JavaScript代码
代码语言：javascript复制history.pushState({name: "menglong"}, '', "li.html");运行了history.pushState()方法后，新的状态信息就会被增加到历史状态栈，而浏览器地址栏也会变成新的相对URL。
可是，浏览器并不会想server发送请求。即使历史状态改变之后查新location.href也会返回与地址栏中同样的地址。
另外，第二个參数眼下还没有浏览器实现，所以全然能够仅仅传入一个空字符串就可以，或者一个短标题也能够。
第一个參数则应该尽可能提供初始化页面状态所需的各种信息。
由于history.pushState()方法会创建新的历史状态，所以会发现”后退”button也能够使用了。按下”后退”button，会触发window对象的popstate事件。Popstate事件的事件对象有一个state属性，这个属性就包括着当初以第一个參数传递给pushState()的状态对象。
小样例例如以下
JavaScript代码
代码语言：javascript复制window.addEventListener('popstate',function(ev){
var state = event.state;
if(state){ // 当第一个页面载入的时候state为空
processState(state)
}
}, false);得到了这个状态的对象后。必须把页面重置为状态对象中的数据表示的状态(由于浏览器不会自己主动为你做这些)。记住，浏览器载入的第一个页面没有状态，所以”后退”阿牛返回浏览器载入的第一个页面时。event.state值为null。
要更新当前历史状态，能够调用replaceState()，传入的參数与pushState()方法的前两个參数同样。
调用replaceState()不会在历史状态栈中创建新状态，仅仅会重写当前状态。
小样例例如以下
JavaScript代码
代码语言：javascript复制history.replaveState({name: "meng"}, "meng1234");在使用HTML5的历史状态管理机制的时候。须要确保使用pushState()创造的每个”假”URL。在Webserver上都有一个真的、实际存在的URL与之相应。
否则，单机”刷新”button会导致404错误。
支持HTML5历史状态管理的浏览器有Chrome、Safari 5 、Firefox 4 和Opera 11.5 。在Safari和Chrome中，传递给pushState()或replaceState()的状态对象中不能包括DOM元素。
而Firefox支持在状态对象中包括DOM元素。Opera还支持一个history.state属性，它返回当前状态的状态对象。以下就是小样例时间了，结合小样例才干更好的理解HTML5中的历史管理。
加入href值实现历史管理
HTML代码
代码语言：javascript复制<input type="button" value="35选7" id="input1" />
<div id="div1"></div>JavaScript代码
代码语言：javascript复制//onhashchange : 事件 : 当hash值改变的时候触发的事件
//hash改变就会出现就会出现历史管理
window.onload = function(){
var oInput = document.getElementById('input1');
var oDiv = document.getElementById('div1');
var obj = {};
oInput.onclick = function(){
var number = randomNum(35,7);
oDiv.innerHTML = number;
var oRN = Math.random();
obj[oRN] = number;
window.location.hash = oRN;
};
window.onhashchange = function(){
var number = obj[window.location.hash.substring(1)] || '';
oDiv.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代码
代码语言：javascript复制<input type="button" value="35选7" id="input1" />
<div id="div1"></div>JavaScript代码
代码语言：javascript复制//pushState : 三个參数：1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)
//history.pushState({name: "menglong"}, '', "li.html");
window.onload = function(){
var oInput = document.getElementById('input1');
var oDiv = document.getElementById('div1');
var iNow = 0;
oInput.onclick = function(){
var number = randomNum(35,7);
oDiv.innerHTML = number;
history.pushState(number,'',iNow );
};
window.onpopstate = function(ev){ //历史管理改变，就会触发
var number = ev.state || '';
oDiv.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对象)就为大家介绍到这里了。很多其它有关HTML5的相关小内容尽在梦龙小站的HTML5实战与剖析频道。
感谢大家的支持。
版权声明：本文博主原创文章，博客，未经同意不得转载。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/116790.html原文链接：https://javaforall.cn
