如何通过 JS 来修改浏览器地址而页面不刷新

window.history.back()  //后退
window.history.forward()  //前进

2.移动到指定的历史记录点

window.history.go(-1)  //相当于back(),后退一页
window.history.go(1)   //相当于forward(),前进一页

3.历史长度

window.history.length

下面才是我们这篇文章的重点，也是在HTML5中才引进的。

二、添加和修改历史记录条目

有两个方法：

• history.pushState()：会改变referrer的值，而在你调用方法后创建的 XMLHttpRequest 对象会在 HTTP 请求头中使用这个值。referrer的值则是创建 XMLHttpRequest 对象时所处的窗口的URL。
• history.replaceState()：会修改当前历史记录条目而并非创建新的条目

我们先来看一个完整的例子再来了解这两个方法

<div id="aa"></div>
<button id="btn" onclick="update()">点击</button>
   
<script>   
  var i=0;   
  var box=document.getElementById("aa");   
  function update(){   
    var foo={id:i};   
    var newUrl="?page="+i;   
    history.pushState(foo,'title',newUrl);   
    box.innerHTML=location.href;   
    i++;;   
  }   
  window.addEventListener('popstate', function(event) {   
    updateState(event.state);   
  });      
  
  function updateState(data){   
    box.innerHTML = data.id;   
  }   
</script> 

效果如下：

下面来具体看看两个方法

1、history.pushState()

语法：

history.pushState(stateObject,title,url)

三个参数：一个状态对象、一个标题（现在会被忽略），一个可选的URL地址。

• 状态对象（state object）--- 一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。   
  

    任何可序列化的对象都可以被当做状态对象。因为FireFox浏览器会把状态对象保存到用户的硬盘，这样它们就能在用户重启浏览器之后被还原，我们强行限制状态对象的大小为640k。如果你向pushState()方法传递了一个超过该限额的状态对象，该方法会抛出异常。如果你需要存储很大的数据，建议使用sessionStorage或localStorage。

• 标题（title）---FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。
  

• 地址（URL）---新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。
  

var currentState = history.state;