历史记录(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>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值