通过观看妙味视频以及看js高级程序设计对历史状态管理做一个小小的总结，方便以后查阅

我们知道浏览器上面有个“前进”和“后退”按钮，如果我们不做过多的设置，它们只有当我们打开了一个新页面的时候才会起作用，而在现代web应用中，用户每次操作不一定会打开一个全新的页面，因此“后退”和“前进”按钮也就失去了作用，导致用户很难在不同状态间切换。

要解决这个问题，有两种方法

1、hashchange事件（当url参数列表及URL中#后面的所有字符串发生变化时触发该事件）：改变hash值来管理

看个例子（随机选彩票）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function(){
  var oInput = document.getElementById('input1');
  var oDiv = document.getElementById('div1');
  
  var json = {};
  
  oInput.onclick = function(){
    
    var num = Math.random();//随机产生0-1的数字
    
    var arr = randomNum(35,7);//随机生成7个1-35之间的数字
     
    json[num] = arr;将数组存入json中
    
    oDiv.innerHTML = arr;//将数组中的值添加到页面中
    
    window.location.hash = num;//每次单击按钮时改变URL中#后面的数字
    
  };
  
  window.onhashchange = function(){//当URL中#后面的字符串改变时触发该事件
    
    oDiv.innerHTML = json[window.location.hash.substring(1)];
    
  };
  
  function randomNum(iAll,iNow){
    
    var arr = [];
    var newArr = [];
    for(var i=1;i<=iAll;i++){//生成从1-iAll的数字，并将其放入arr数组中
      arr.push(i);
    }
    
    for(var i=0;i<iNow;i++){//从arr数组中随机选出iNow个数字并存入新的数组newArr中
      newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
    }
    
    return newArr;//将这个新数组返回
    
  }
  
};
</script>
</head>

<body>
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
</body>
</html>


2、history.pushState()方法：通过状态管理API，能够在不加载新页面的情况下改变浏览器的URL

注意：使用该方法：必须要在服务器下运行

pushState()，该方法可以接收三个参数：状态对象、新状态的标题、可选的相对URL

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

因为pushState()会创建新的历史状态，所以你会发现“后退”按钮也能使用了》按下“后退”按钮，会触发window对象的popstate事件。而popstate事件的事件对象有一个state属性，这个属性就包含着当初以第一个参数传递给pushState()状态的对象

注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面

下面看用pushState()方法实现随机选彩票功能

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>随机选彩票</title>
<script>
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){//state是event对象下的属性
    var ev = ev||event;
    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<iNow;i++){
      newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
    }
    
    return newArr;
    
  }
  
};
</script>
</head>

<body>
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
</body>
</html>