html5 历史管理以及hash管理

来源：互联网发布：剑灵捏脸数据下载不了编辑：程序博客网时间：2024/05/17 03:19

1. onhashchange 以下是一个彩票的历史管理的demo 增加来hash来添加来历史纪录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="tan"  value="彩票随机生成" />
<div id="div1"></div>
<script>
    window.onload  = function(){
     var oT = document.getElementById('tan');
     var oDiv = document.getElementById('div1');
     var jsons = {};
     oT.onclick = function(){
         var num = Math.random();
         var arr = randomNum( 64,7);
         jsons[num] = arr ;
         oDiv.innerHTML = jsons[num];
         window.location.hash = num;
     };
      window.onhashchange = function(){
         oDiv.innerHTML = jsons[window.location.hash.substring(1)];
      };

     function randomNum(iAll,iNow){
        var arr = [];
        var newArr = [];
        for(var i=1;i<=iAll;i++){
            arr.push(i);
        }
        for(var i=0;i<iNow;i++){
            newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
        }
        return newArr;
    }
};
</script>
</body>
</html>

2. h5新增的另一种方式

 history 另一种方式
       -服务器下运行
       -pushState :  三个参数 ：数据  标题(都没实现)  地址(可选)
       -popstate事件 :  读取数据   event.state
       -注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面

同样是上面的案例，进行重新写，相比之下，更加的简单明了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="tan"  value="彩票随机生成" />

<div id="div1"></div>
<script>
    window.onload  = function(){
        var oT = document.getElementById('tan');
        var oDiv = document.getElementById('div1');
        oT.onclick = function(){
           var arr = randomNum( 64,7);
           history.pushState( arr,'1111',arr  );
            oDiv.innerHTML = arr;
        };
        window.onpopstate = function(ev){
            oDiv.innerHTML = ev.state;  // 读取数据
        };
        function randomNum(iAll,iNow){
            var arr = [];
            var newArr = [];
            for(var i=1;i<=iAll;i++){
                arr.push(i);
            }
            for(var i=0;i<iNow;i++){
                newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
            }
            return newArr;
        }
    };
</script>
</body>
</html>

0 0