歷史管理（哈希值）

1、基本信息

寫法：地址 + 「#」 + 任意字母

描述：哈希值發生變化的時候會觸發歷史管理，若沒有特殊設置頁面內容不變，若有設置當點擊按鈕時頁面內容會變化但頁面不跳轉

觸發歷史管理的方法：一、跳轉頁面   二、hash（哈希值）  三、pushState

歷史管理的做用：點擊瀏覽器上面的小箭頭可以返回上一個訪問的頁面

JS方法——哈希值改變觸發事件：

一、哈希改變觸發函數寫法：

window.onhashchange = function(){};

二、獲取地址欄的哈希值

寫法：window.location.hash

描述：獲取到的數值帶「#」

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

 H5方法——哈希值改變觸發事件：

存儲寫法：history.pushState(數據,標題,地址可選)

獲取寫法：window.onpopstate = function(){ }

生效條件：在服務器下才能生效，若是在本地測試的話須要打開wamp

不能刷新頁面：刷新後頁面會不存在，由於是歷史管理，不是實際的頁面

 

2、實例

一、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>

 二、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>