但是，这样实现还有问题，在第二页的时候如果刷新页面的话，会发生错乱，如下所示：首先点下一页到第二页，然后刷新页面，出现第一页，再点下一页，出现第二页，点返回时出现问题，显示还是第二页，不是期望的第一页，直到再次点返回时才是第一页：

      从右边的工具栏可以发现，点第一次返回的时候获取到的pageIndex仍然是1。对于这种情况，需要分析history模型，如下所示：

     可以理解为对history的操作，浏览器有一个队列，用来存放访问的记录，包括每个访问的网址还有state数据。一开始，队列的首指针指向page = 0的位置，点下一页时，执行了pushState，在这个队列插入了一个元素，同时通过pushState操作记录了这个元素的url和state数据。 在这里可以看出，pushState的操作最重要的作用还是给history队列插入元素，这样浏览器的后退按钮才不是置灰的状态，其次才是上面说的存放 数据。点后退的时候，队首指针后退一步指向page = 0的位置，点前进时又前进指向page = 1的位置。

      如果在page = 1的位置刷新页面，模型是这个样子的：

      在第2步刷新的时候，页面的pageIndex又恢复成默认值0，所以page = 0，显示第一页数据，但是history所用的队列并没有改变。然后再点下一页时，又给这个队列push了一个元素，这个队列就有两个pageIndex 为1的元素，所以必须得两次返回才能回到page = 0的位置，也就是上面说的错乱的情况。

      根据上面的分析，这样的实现是有问题的，一但用户不是在page = 0的位置刷新页面，就会出现需要点多次返回按钮才能够回到原先的页面。

      所以得在刷新的时候，把当前页的state数据更新一下，用replaceState，替换队列队首指针的数据，也就是当前页的数据。方法是页面初始化时replace一下：

window.history.replaceState({page: pageIndex /*此处为0*/}, null, window.location.href);

      这样模型就变成：

      但其实用户刷新的时候更希望的是还是显示当前页，而不是回到第一页。一个解决办法是用当前页的window.history.state数据，这个属性浏览器支持得比较晚。在页面初始化时设置pageIndex时就从history.state取：

var pageIndex = window.history.state === null ? 0 : window.history.state.page;

      safari里面的history.state是最近执行pushState传入的数据，因此这个办法在chrome/firefox里面行得通，但是safari行不通。

      第二种办法是借助h5的localStorage存放当前页数：

//页面初始化，取当前第几页先从localStorage取 var pageIndex = window.localStorage.pageIndex || 0; function nextPage(){ //将页面的index加1，同时存放在localStorage window.localStorage.pageIndex = ++pageIndex; //重新发请求和页面加载 makeRequest(pageIndex); window.history.pushState({page: pageIndex}, null, window.location.href); } window.addEventListener("popstate", function(event){ var page = 0; if(event.state !== null){ page = event.state.page; } makeRequest(page); //点击返回或前进时，需要将page放到localStorage window.localStorage.pageIndex = page; });

      将页面中所有改变pageIndex的地方，同时放到localStorage。这样刷新页面的时候就可以取到当前页的pageIndex。

      上面的方法都是将pageIndex放到了state参数里，还有一种方法是把它放到第三个参数url里，也就是说通过改变当前页网址的办法。pageIndex从网址里面取：

1 //当前第几页 2 var pageIndex = window.location.search.replace("?page=", "") || 0; 3 function nextPage(){ 4 //将页面的index加1 5 ++pageIndex; 6 //重新发请求和页面加载 7 makeRequest(pageIndex); 8 window.history.pushState(null, null, "?page=" + pageIndex); 9 }

      注意，一旦执行了第8行的pushState，当前网址的地址就会发生变化。

      有一点需要注意的是，window.history.length虽然返回是的当前队列的元素个数，但不代表history本身就是那个队列，通过不同浏览器的对history[i]的输出：

     可以看到history是一个数组，它的作用是让用户拿到history.length，当前的长度，但是填充的内容是不确定的。

      除了使用history之外，还有借助hash的方法，就是使用了这样的方法：