在網易云課堂上看了妙味課堂的關于html5歷史管理的課程,在這里做一下筆記。
單頁面或ajax局部刷新的頁面中,沒有辦法通過前一步和后一步得到歷史訪問數據,此時有兩種方法可以解決這個問題:
1.onhashchange事件,示例代碼:
<body><input type="button" value="35選7" id="input1"><div id="div1"></div><script type="text/javascript">var oInput=document.getElementById("input1");var oDiv=document.getElementById("div1");var obj={};oInput.οnclick=function(){var number=randomNumber(35,7);oDiv.innerHTML=number;var oRd=Math.random();obj[oRd]=number;window.location.hash=oRd;}window.οnhashchange=function(){var number=obj[window.location.hash.substr(1)]||'';oDiv.innerHTML=number;}function randomNumber(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>
</body>
</html>
2.history下的pushstate和popstate事件,示例代碼:
<body><input type="button" value="35選7" id="input1"><div id="div1"></div><script type="text/javascript">var oInput=document.getElementById("input1");var oDiv=document.getElementById("div1");oInput.οnclick=function(){var number=randomNumber(35,7);oDiv.innerHTML=number;history.pushState(number,'');}window.onpopstate=function(ev){console.log(1);var number=ev.state||'';oDiv.innerHTML=number;}function randomNumber(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>
</body>
</html>
幾點說明:
1.hash就是url中#和它后面的內容
2.必須把hashchange事件處理程序添加給window對象,然后url參數列表只要變化就會調用它。
3.pushstate方法接收三個參數:數據,標題(都沒實現,實際開發中一般為‘’),地址(可選)
4.popstate事件讀取數據用event.state