1、hash
利用网页地址后的hash值不同,来区分记录不同页面内容
http://localhost:63342/verbose-octo-parakeet/html5/%E5%BD%A9%E7%A5%A8.html?_ijt=sejs0urr6t2dve9uj19gd0jh1i#0.2692206212424262(hash值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<button id="btn">随机彩票</button>
<div id="container"></div>
<script>
var oContainer=document.getElementById('container');
var oBtn=document.getElementById('btn');
var obj={};
oBtn.οnclick=function () {
var arr=[];
for (var i=0;i<7;i++){
arr.push(Math.floor(Math.random()*35+1));/*彩票1-35*/
}
var random=Math.random();
location.hash=random;/*给hash设置一个随机数 用来区分页面内容*/
obj[random]=arr;/*存为变量属性*/
oContainer.innerHTML=arr;/*放到页面*/
// console.log(obj);
}
window.οnhashchange=function () {/*hash值改变事件*/
var str=location.hash.substring(1);/*取hash值 1到最后 去掉# */
if(str){/*如果有值*/
oContainer.innerHTML=obj[str];/*取值*/
}
}
</script>
</body>
</html>
2、history
pushState和onpopstate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<button id="btn">随机彩票</button>
<div id="container"></div>
<script>
var oContainer=document.getElementById('container');
var oBtn=document.getElementById('btn');
oBtn.οnclick=function () {
var arr=[];
for (var i=0;i<7;i++){
arr.push(Math.floor(Math.random()*35+1));
}
oContainer.innerHTML=arr;/*放到页面*/
history.pushState(arr,'');/*存历史记录*/
};
window.onpopstate=function (e) {/*浏览器回退触发事件*/
oContainer.innerHTML=e.state;/*设置*/
}
</script>
</body>
</html>