html5入门教程（八）history详解

创建状态

---

HTML5新添加了对历史的管理，用户可以通过”前进”和”后退”按钮进行历史页面的切换。这让一些不在新页面中打开的新页面前进后退自如，提高了用户体验。

通过haschange事件，可以知道URL的参数什么时候发生了变化，也就是什么时候该有所反应。通过状态管理的API，能够在不加载新页面的情况下改变浏览器的URL。所以需要使用history.pushState()方法。history.pushState()方法接收三个参数：1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)。小例子如下

执行了history.pushState()方法后，新的状态信息就会被加入到历史状态栈，而浏览器地址栏也会变成新的相对URL。但是，浏览器并不会想服务器发送请求，即使历史状态改变之后查新location.href也会返回与地址栏中相同的地址。另外，第二个参数目前还没有浏览器实现，所以完全可以只传入一个空字符串即可，或者一个短标题也可以。第一个参数则应该尽可能提供初始化页面状态所需的各种信息。

因为history.pushState()方法会创建新的历史状态，所以会发现”后退”按钮也可以使用了。按下”后退”按钮，会触发window对象的popstate事件。Popstate事件的事件对象有一个state属性，这个属性就包含着当初以第一个参数传递给pushState()的状态对象。小例子如下

history.pushState({name: "dangyunlong"}, '', "h.html");  

更新状态：

---

更新状态直接更新当前地址栏的内容，他不会产生后退操作，只是单纯修改当前地址。

要更新当前历史状态，可以调用replaceState()，传入的参数与pushState()方法的前两个参数相同。调用replaceState()不会在历史状态栈中创建新状态，只会重写当前状态。小例子如下

history.replaceState({name: "222"}, '', "ylll"); 

读取状态：

---

window.addEventListener('popstate',function(ev){  
     console.log(event.state)
}, false);

网上例子：
他这个还是创建了一个数组，然后把生成的内容存到数组中，在根据传的值
把数组对应的内容给读出来。

<input type="button" value="35选7" id="input1" />  
<div id="div1"></div>   
<script type="text/javascript">
    window.onload = function(){  
        var oInput = document.getElementById('input1');  
        var oDiv = document.getElementById('div1');  
        var iNow = 0;  
        oInput.onclick = function(){  
            var number = randomNum(35,7);  
            oDiv.innerHTML = number;  
            history.pushState(number,'',iNow++);  
        };  
        window.onpopstate = function(ev){  //历史管理改变，就会触发  
            var number = ev.state || '';  
            oDiv.innerHTML = number;  
        };  
        function randomNum(alls,now){  
            var arr = [];  
            var newArr = [];  
            for(var i=1;i<=alls;i++){  
                arr.push(i);  
            }  
            for(var i=0;i<now;i++){  
                newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1 ) );  
            }  
            return newArr;  
        }  
    };   
</script>

history和hash

---

history有个问题是第一次点击是无效的，只有第二次才能起作用。这就非常的不爽了。
通常我们也不会需要他执行特别复杂的操作，反而是hash非常的好用。

hash是直接在url后面加一个#，然后立即可以被onpopstate事件检测到。

于是我们可以这样去做：

//设置一个hash
location.hash="showpage"

//浏览器后退时触发
window.onpopstate = function() {  
      checkLocation();  
};  
function checkLocation(){  
    //hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。  
    if(location.hash.indexOf("#showpage")>-1){  
        page2show();
    }else{  
        //返回的时候
       page2hide();
    }  
}

//page2展开
function page2show(){
    //$("#page1").hide();
    //$("#page2").show();
    //$("#top").show();
    $("#page1").fadeOut();
    $("#page2").fadeIn();
    $("#top").fadeIn();
}
//page2隐藏
function page2hide(){
    //$("#page1").show();
    //$("#page2").hide();
    //$("#top").hide()
    
    $("#page1").fadeIn();
    $("#page2").fadeOut();
    $("#top").fadeOut();
    
    location.hash=""
}