历史管理（哈希值）

一、基本信息

写法：地址 + “#” + 任意字母

描述：哈希值发生变化的时候会触发历史管理，若没有特殊设置页面内容不变，如有设置当点击按钮时页面内容会变化但页面不跳转

触发历史管理的方法：1、跳转页面   2、hash（哈希值）  3、pushState

历史管理的作用：点击浏览器上面的小箭头能够返回上一个访问的页面

JS方法——哈希值改变触发事件：

1、哈希改变触发函数写法：

window.onhashchange = function(){};

2、获取地址栏的哈希值

写法：window.location.hash

描述：获取到的数值带“#”

获取不带#的哈希值：window.location.hash.substring(1)

 H5方法——哈希值改变触发事件：

存储写法：history.pushState(数据,标题,地址可选)

获取写法：window.onpopstate = function(){ }

生效条件：在服务器下才能生效，如果在本地测试的话需要打开wamp

不能刷新页面：刷新后页面会不存在，因为是历史管理，不是实际的页面

 

二、实例

1、js随机选择彩票，点击浏览器返回可查看上一组彩票

window.onload = function(){
    var oInput = document.getElementById('input1');
    var oDiv = document.getElementById('div1');
    
    var json = {};
    
    oInput.onclick = function(){
        
        var num = Math.random();
        
        var arr = randomNum(35,7);
         
        json[num] = arr;
        
        oDiv.innerHTML = arr;
        
        window.location.hash = num;
        
    };
    
    window.onhashchange = function(){
        
        oDiv.innerHTML = json[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;
        
    }
    
};

<input type="button" value="随机选择" id="input1">
<div id="div1"></div>

 2、h5随机选择彩票，点击浏览器返回可查看上一组彩票

window.onload = function(){
    var oInput = document.getElementById('input1');
    var oDiv = document.getElementById('div1');
    
    oInput.onclick = function(){
        
        var arr = randomNum(35,7);
        
        history.pushState(arr,'',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;
        
    }
    
};

<input type="button" value="随机选择" id="input1">
<div id="div1"></div>