1、onhashchange:改变hash值来进行历史管理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="随机选择" id="btn" />
<div id="div1"></div>
</body>
</html>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById("div1");
window.json = {};
oBtn.onclick = function(){
var key = Math.random();
var value = randomNum(35,7);
json[key] = value;
//oDiv.innerHTML = value;
window.location.hash = key;
} window.onhashchange = function(){
var hashValue = window.location.hash.substring(1);
if(!hashValue)return;
oDiv.innerHTML = json[hashValue];
}
} function randomNum(totlaNum,resultNum){
var totalArray = new Array();
var resultArray = new Array();
for(var i = 0 ;i < totlaNum;i++){
totalArray.push(i);
} for(var i = 1; i<= resultNum;i++){
resultArray.push(totalArray.splice(Math.floor(Math.random()*totalArray.length),1));
}
return resultArray;
}
</script>
2、history+pushState+ popstate事件：需要在服务器下运行。网址是虚假的，需要服务器指定对应页面，否则刷新找不到页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="随机选择" id="btn" />
<div id="div1"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById("div1");
window.json = {};
oBtn.onclick = function(){
var value = randomNum(35,7);
//pushState接收三个参数 ：数据 标题(都没实现) 地址(可选)
window.history.pushState(value,"");
oDiv.innerHTML = value;
} window.onpopstate = function(ev){
oDiv.innerHTML = ev.state;
} } function randomNum(totlaNum,resultNum){
var totalArray = new Array();
var resultArray = new Array();
for(var i = 0 ;i < totlaNum;i++){
totalArray.push(i);
} for(var i = 1; i<= resultNum;i++){
resultArray.push(totalArray.splice(Math.floor(Math.random()*totalArray.length),1));
}
return resultArray;
}
</script>