html5 历史管理

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


posted @ 2015-12-28 10:33  一直傻笑  阅读(322)  评论(0)    收藏  举报