关键词：hash
html5新增了历史管理功能，在现代Web应用中，用户可以通过”前进”和”后退”按钮进行历史页面的切换。这让一些不在新页面中打开的新页面前进后退自如，提高了用户体验。
历史管理共有两种方法
方法1
pushState(数据 , 标题 , 地址(可选）)
popstate事件： 读取数据 event.state
我们做个随机取数的例子
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
window.onload = function(){
var oInput = document.getElementById('input1');
var oDiv = document.getElementById('div1');
oInput.onclick = function(){
var arr = randomNum(35,7);
history.pushState(arr,'',arr); // 存储数据
oDiv.innerHTML = arr;
};
window.onpopstate = function(ev){ // 读取数据
oDiv.innerHTML = ev.state;
};
function randomNum(iAll,iNow){
var arr = [];
var newArr = [];
for(var i=1;i<=iAll;i++){
arr.push(i);
}
for(var i=0;i<iNow;i++){
newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
}
return newArr;
}
};
方法2
onhashchange: 事件；当hash值有变化的时候触发 ，读取数据
window.onload=function()；存储事件
var json = {};
oInput.onclick = function(){
var num = Math.random();
var arr = randomNum(35,7);
json[num] = arr;
oDiv.innerHTML = arr;
window.location.hash = num; // 存储历史
};
window.onhashchange = function(){ // 触发历史
oDiv.innerHTML = json[window.location.hash.substring(1)];
};
