html5历史管理
在網易云課堂上看了妙味課堂的關于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
轉載于:https://www.cnblogs.com/iagw/p/6378755.html
總結
- 上一篇： Regular Exprassion--
- 下一篇： mybatis入门-新手注意问题