HTML 5履歴管理

キーワード:hash
html 5には履歴管理機能が追加され、現代のWebアプリケーションでは「前進」ボタンと「後退」ボタンで履歴ページを切り替えることができます.これにより、新しいページで開かない新しいページが前進したり後退したりして、ユーザー体験が向上します.
履歴管理には2つの方法があります
方法1
PushState(データ、タイトル、アドレス(オプション))
popstateイベント:データを読み込むevent.state
ランダムな数の例を示します

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

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