1、onhashchange:改变hash值来进行历史管理。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="随机选择" id="btn" /> 9 <div id="div1"></div> 10 </body> 11 </html> 12 <script> 13 window.onload = function(){ 14 var oBtn = document.getElementById("btn"); 15 var oDiv = document.getElementById("div1"); 16 window.json = {}; 17 oBtn.onclick = function(){ 18 var key = Math.random(); 19 var value = randomNum(35,7); 20 json[key] = value; 21 //oDiv.innerHTML = value; 22 window.location.hash = key; 23 } 24 25 window.onhashchange = function(){ 26 var hashValue = window.location.hash.substring(1); 27 if(!hashValue)return; 28 oDiv.innerHTML = json[hashValue]; 29 } 30 } 31 32 function randomNum(totlaNum,resultNum){ 33 var totalArray = new Array(); 34 var resultArray = new Array(); 35 for(var i = 0 ;i < totlaNum;i++){ 36 totalArray.push(i); 37 } 38 39 for(var i = 1; i<= resultNum;i++){ 40 resultArray.push(totalArray.splice(Math.floor(Math.random()*totalArray.length),1)); 41 } 42 return resultArray; 43 } 44 </script>
2、history+pushState+ popstate事件：需要在服务器下运行。网址是虚假的，需要服务器指定对应页面，否则刷新找不到页面。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="随机选择" id="btn" /> 9 <div id="div1"></div> 10 </body> 11 </html> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 var oBtn = document.getElementById("btn"); 15 var oDiv = document.getElementById("div1"); 16 window.json = {}; 17 oBtn.onclick = function(){ 18 var value = randomNum(35,7); 19 //pushState接收三个参数 ：数据 标题(都没实现) 地址(可选) 20 window.history.pushState(value,""); 21 oDiv.innerHTML = value; 22 } 23 24 window.onpopstate = function(ev){ 25 oDiv.innerHTML = ev.state; 26 } 27 28 } 29 30 function randomNum(totlaNum,resultNum){ 31 var totalArray = new Array(); 32 var resultArray = new Array(); 33 for(var i = 0 ;i < totlaNum;i++){ 34 totalArray.push(i); 35 } 36 37 for(var i = 1; i<= resultNum;i++){ 38 resultArray.push(totalArray.splice(Math.floor(Math.random()*totalArray.length),1)); 39 } 40 return resultArray; 41 } 42 </script>