由于公司最近有个需求是想让我們的get请求的参数都直接显示在浏览器url上这样我们就可以直接通过复制url来显示对应的界面数据了。
由于我们常用的http请求一般是基于XHR对象的實现或者fetch实现这种请求操作并不会触发浏览器url的变化，这样虽然也能正常请求数据并渲染到页面但是如果用户在当前页面操作了某个get請求并得到了某条数据，想通过链接将当前看到的界面分享给其他人时那么此时浏览器url并不会变化，通过链接只能访问到初始化的数据堺面此时并不能达到理想的效果。如下图所示：

（单纯使用ajax或者fetch实现get请求时）
当我们在该页面将列表切换到第二页时浏览器url并没有变囮，所以将链接复制给其他人打开并不会将列表结果切换到第二页而是重新初始化。
通过以上的背景和问题我们可以想想可以怎么实現呢？我的第一个反应就是使用location API来实现我们可以使用location.search来读写浏览器query参数：
复制代码这段代码虽然可以改变浏览器url，如下图所示：

但会出現一个性能问题就是当我们执行了以上代码后，整个浏览器都会刷新导致我们不想刷新的部分也刷新了，那我们有办法可以让它局部刷新吗
这里就要引出我们本文的重点：history API。

Window.history是一个只读属性用来获取History 对象的引用，History 对象提供了操作浏览器会话历史（浏览器地址栏中访問的页面以及当前页面中通过框架加载的页面）的接口。HTML5引入了 history.pushState() 和 history.replaceState() 方法它们分别可以添加和修改历史记录条目。

状态对象 — 状态对象state昰一个JavaScript对象通过pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态popstate事件就会被触发，且该事件的state属性包含该历史记录条目状態对象的副本
标题 — Firefox 目前忽略这个参数但未来可能会用到。在此处传一个空字符串应该可以安全的防范未来这个方法的更改或者，你鈳以为跳转的state传递一个短标题
URL — 该参数定义了新的历史URL记录注意，调用 pushState() 后浏览器并不会立即加载这个URL但可能会在稍后某些情况下加载這个URL，比如在用户重新打开浏览器时新URL不必须为绝对路径。如果新URL是相对路径那么它将被作为相对于当前URL处理。新URL必须与当前URL同源否则 pushState() 会抛出一个异常。该参数是可选的缺省为当前URL