H5中的history方法Api介绍

　　最近公司在做一个微信公众号，看了项目源码，看到项目中用到了history的Api来进行控制浏览器的历史记录及前进/后退键；

　　下面来跟大家一起来捋捋history的Api方法和使用：

　　history.pushState(data,title,url)：在浏览器中新增一条历史记录；

　　data会在onpopstate事件触发时作为参数传递过去，title为页面标题，url为页面地址；

　  history.replaceState(data,title,url)：在浏览器中替换当前历史记录；

　　data会在onpopstate事件触发时作为参数传递过去，title为页面标题，url为页面地址；

　  history.length()：当前历史列表中的历史记录条数；

      window.onpopstate：实际上popstate是一个浏览器内置的点击事件，响应pushState和replaceState的触发调用；

　　

    //当页面加载时   
     window.onload=function(){
        pushHistory();
    //新增浏览器事件监听(popstate为事件名，触发事件执行function)
      window.addEventListener("popstate",function(e){
          //括号里面应为业务代码(要做的事情)   
        },false);
      function pushHistory(){
　　　　//定义对象
        var state={
           title:“title”,
           url:"#"
          };
　　　　//调用history.pushState方法往浏览器历史记录上新增一条历史记录
       window.history.pushState(state,"title","#");
        }        
    }    

　　history.back(-1):返回到当前页的上一页(原页面表单中的内容会保留)

　  history.back(0):页面刷新

     history.back(1):当前页前进一页

     history.go(-1): 返回到当前页的上一页(原页面表单中的内容会丢失，效果基本和history.back(-1)一样)

     history.forward():当前页面前进一页(和history.back(1)效果一样)

 

　　声名：history方法可以直接调用，例：history.pushState()，也可以用window.history.pushState()来调用。因为history是属于浏览器中的子对象，两种调用方法都是生效的；