在浏览器中改变地址栏url，将会触发页面资源的重新加载，这使得我们可以在不同的页面间进行跳转，得以浏览不同的内容。但随着单页应用的增多，越来越多的网站采用ajax来加载资源。因为异步加载的特性，地址栏上的资源路径没有被改变，随之而来的问题就是页面的状态无法被保存。这导致我们难以通过熟悉的方式（点击浏览器前进/后退按钮），在前后的页面状态间进行切换。
为了解决ajax页面状态不能返回的问题，人们想出了一些曲线救国的方法，比如利用浏览器hash的特性，将新的资源路径伪装成锚点，通过onhashchange事件来改变状态，同时又避免了浏览器刷新。但这样始终显得有些hack。
现在HTML5规范为 window.history引入了两个新api，pushState 和 replaceState，我们可以使用它很方便的达到改变url不重载页面的目的
——引用于https://blog.csdn.net/helloxiaoliang/article/details/73850428
location.hash和location
当一个页面的（显示）状态被改变时，可以通过location.hash实现刷新页面后或者copy页面的URL再打开后保持状态而不还原。
当hash只有一个#时，location.hash返回空字符串；当hash不止一个#时，location.hash返回#以及#后面的部分。
当 一个window的 hash （URL 中 # 以及#后面的部分，可通过location.hash返回）改变时就会触发 hashchange 事件。
window.location属性返回一个有文档的当前位置的信息的Location对象。
语法：var oldLocation = location; location = newLocation;
无论什么时候，当一个新值被赋予location对象，一个文档将通过这个URL被加载，就像是location.assign()被这个URL调用了一样。
location.reload(true);：强制从服务器重新加载当前页面。
location.replace(\'http://example.com/#\' + location.pathname);：将通过使用replace()方法插入location.pathname的值进hash来重新加载页面。注意，这replace()方法和字符串的replace()方法不是一个东西。
location.search = sData;：通过改变search属性来发送一个字符串数据给服务器。"?Some%20data"添加到当前的URL，然后URL被送到服务器（如果服务器没有采取动作，当前文档就用这个改变的search字符串重新加载）。
操纵浏览器历史
DOM window 对象通过 history 对象提供了对浏览器历史的访问。
window.history.back();：和用户点击浏览器回退按钮的效果相同。类似的还有window.history.forward();和window.history.go(Num);。另外，window.history.length; 可以获得历史堆栈中页面的数量。执行history.back()或history.forward()后会触发 window.onpopstate事件。
pushState()方法绝不会导致hashchange 事件被激活，就算新的URL和旧的只在hash上有区别。
history.pushState() 方法和history.replaceState()方法分别可以添加和改变历史实体。这两个方法要和window.onpopstate事件一起用。push和pop说明它们的行为就像栈。popstate事件会被触发当一个文档的激活的历史实体改变。如果激活的历史实体是由history.pushState()创建的，或者是被history.replaceState()改变过，那popstate事件的state属性（即e.state）会包含一个该激活的历史实体的sate对象的副本；如果不是，那e.state的值为null。调用history.pushState()方法和history.replaceState()方法不会触发popstate事件，the popstate event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in JavaScript)。现在的浏览器加载页面时都不会触发popstate事件了（以前有的浏览器会）。
举个例子。history.pushState({ foo: "bar" }, "", "bar.html");会使地址栏的变成，但是不会使浏览器加载，甚至都不会使浏览器检查是否存在。假设用户在这个页面导航到了，然后点击浏览器的回退按钮。这时，地址栏变成，而且浏览器会加载。如果这时你读取history.state，你会得到{ foo: "bar" }（即history.pushState()的第一个参数）。这时popstate事件不将被触发（？），因为页面是通过被加载而显示的（页面加载时触发的是load事件而不是popstate事件）。如果我们再点击回退按钮，才会回到，这时文档会获得一个popstate事件（可以通过这个事件改变文档内容），且history.state是null。总之，history.pushState()会添加一个历史实体并激活它（也就是现在的页面变成新添加的历史实体了），但暂时还是显示原来的历史实体，只有当再次回到这个页面时（包括刷新，但是要注意刷新不会触发popstate事件哦，只有前进和后退会触发）才会显示新添加的历史实体。
history.pushState()接收三个参数，一个对象（用作state），一个字符串（用作标题，但是目前都被浏览器忽略），一个字符串（用作URL，是可选的）：