历史记录（hash和history两种）

时间 2019-12-07 标签历史记录 hash history 两种

一、hashhtml

利用网页地址后的hash值不一样，来区分记录不一样页面内容html5

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.onclick=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.onhashchange=function () {/*hash值改变事件*/
        var str=location.hash.substring(1);/*取hash值  1到最后  去掉# */
        if(str){/*若是有值*/
            oContainer.innerHTML=obj[str];/*取值*/
        }
    }
</script>
</body>
</html>

二、historydom

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.onclick=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>