HTML5历史管理

关键词：hash

html5新增了历史管理功能，在现代Web应用中，用户可以通过”前进”和”后退”按钮进行历史页面的切换。这让一些不在新页面中打开的新页面前进后退自如，提高了用户体验。

历史管理共有两种方法

---

方法1

pushState(数据 , 标题 , 地址(可选）)

popstate事件： 读取数据 event.state

我们做个随机取数的例子

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

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;
        
    }
    
};

方法2

onhashchange: 事件；当hash值有变化的时候触发 ，读取数据

window.onload=function()；存储事件

    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)];
        
    };