html5历史管理
在网易云课堂上看了妙味课堂的关于html5历史管理的课程，在这里做一下笔记。
单页面或ajax局部刷新的页面中，没有办法通过前一步和后一步得到历史访问数据，此时有两种方法可以解决这个问题：
1.onhashchange事件，示例代码：
<body>
<input type="button" value="35选7" id="input1">
<div id="div1"></div>
<script type="text/javascript">
var oInput=document.getElementById("input1");
var oDiv=document.getElementById("div1");
var obj={};
oInput.onclick=function(){
var number=randomNumber(35,7);
oDiv.innerHTML=number;
var oRd=Math.random();
obj[oRd]=number;
window.location.hash=oRd;
}
window.onhashchange=function(){
var number=obj[window.location.hash.substr(1)]||'';
oDiv.innerHTML=number;
}
function randomNumber(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;
}
</script>
</body>
</html>
2.history下的pushstate和popstate事件，示例代码：
<body>
<input type="button" value="35选7" id="input1">
<div id="div1"></div>
<script type="text/javascript">
var oInput=document.getElementById("input1");
var oDiv=document.getElementById("div1");
oInput.onclick=function(){
var number=randomNumber(35,7);
oDiv.innerHTML=number;
history.pushState(number,'');
}
window.onpopstate=function(ev){
console.log(1);
var number=ev.state||'';
oDiv.innerHTML=number;
}
function randomNumber(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;
}
</script>
</body>
</html>
几点说明：
1.hash就是url中#和它后面的内容
2.必须把hashchange事件处理程序添加给window对象，然后url参数列表只要变化就会调用它。
3.pushstate方法接收三个参数：数据，标题(都没实现，实际开发中一般为‘’)，地址(可选)
4.popstate事件读取数据用event.state
