html5 设置历史记录的两种方式:
1.通过hash值的方式设置；
2.通过history设置；
具体如下两个demo:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('d1');
var oData= {};
oBtn.onclick = function () {
var num = randomNum(35,7);
oDiv.innerHTML = num;
//历史记录
var oRd = Math.random();
oData[oRd] = num; //保存生成的随机数组到历史记录
window.location.hash = oRd;
}
//onhashchange 当hash值改变的时候触发
window.onhashchange = function () {
var number = oData[window.location.hash.substr(1)]||''; //读取历史记录中对应的随机数组 .substr(1)是去掉hash值生成时的 # 符号
oDiv.innerHTML = number;
}
function randomNum(allnum,now){//在allnum个数字中获取随机的now个数字
var arr = [];
var newArr = [];
for(var i = 1; i<=allnum;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>
</head>
<body>
<input type="button" value="35选7" id="btn"/>
<div id="d1"></div>
</body>
</html>
window.location.hash = xxx //设置hash值，
window.onhashchange = function () {...} //读取hash值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('d1');
var iNow=1;
oBtn.onclick = function () {
var num = randomNum(35,7);
oDiv.innerHTML = num;
//history.pushState(state, title, url)
/*
将当前URL和history.state加入到history中，并用新的state和URL替换当前。不会造成页面刷新。
state：与要跳转到的URL对应的状态信息。人话：要保存在历史记录里的内容
title：目前所有浏览器都不支持，传空字符串就行了。
url：要跳转到的URL地址，不能跨域。 人话：对应保存在历史记录里的路径,如果要对地址浏览器访问，需要在后台配置，否则前台无法访问
*/
history.pushState(num,'',iNow++);
}
//onpopstate 当url值改变的时候触发
window.onpopstate = function (ev) {
var number = ev.state||''; //获取pushState保存的值
oDiv.innerHTML = number;
}
function randomNum(allnum,now){//在allnum个数字中获取随机的now个数字
var arr = [];
var newArr = [];
for(var i = 1; i<=allnum;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>
</head>
<body>
<input type="button" value="35选7" id="btn"/>
<div id="d1"></div>
</body>
</html>
history.pushState(state, title, url)//保存历史记录
window.onpopstate = function (ev) {...}//读取历史记录 需要传入ev事件，通过事件读取之前保存的数据