html5 历史管理

最新推荐文章于 2018-10-14 20:11:14 发布

weixin_30354675

最新推荐文章于 2018-10-14 20:11:14 发布

阅读量77

点赞数

原文链接：http://www.cnblogs.com/sanfense/p/5081778.html

版权

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事件，通过事件读取之前保存的数据

转载于:https://www.cnblogs.com/sanfense/p/5081778.html

weixin_30354675

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 历史管理

html5 设置历史记录的两种方式:1.通过hash值的方式设置；2.通过history设置；具体如下两个demo:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document<...
复制链接

扫一扫