历史记录（hash和history两种）_综合

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>