因为公司最近有个要求，就是我们get请求的所有参数直接显示在浏览器url上，这样我们复制相应的url就可以直接显示了接口数据。背景介绍由于我们常用的http请求一般都是基于XHR对象或者fetch的实现，这种请求操作不会触发浏览器url的变化，所以虽然可以正常请求数据渲染到页面，但是如果用户当前在页面操作get请求，获取了一条数据，想通过链接把当前查看的界面分享给他人，此时浏览器url不会改变，只初始化数据界面即可通过链接访问，此时无法达到理想的效果。如下图：（单纯使用ajax或者fetch实现get请求时）当我们在这个页面切换列表到第二页时，浏览器url没有变化，所以复制链接给别人是打不开的list结果切换到第二页并重新初始化。实现过程通过以上的背景和问题，我们可以思考如何实现呢？我的第一反应是用locationAPI来实现。我们可以使用location.search来读写浏览器查询参数：location.search='?page=2';这段代码虽然可以改变浏览器url，如下图所示：但是会存在一个性能问题，就是当我们执行上面的代码时，整个浏览器都会被刷新，造成我们不想刷新的部分如果刷新了，有没有办法让我们局部刷新呢？答案是一定有。这里是我们文章的重点：historyAPI。historyAPIWindow.history是一个只读属性，用于获取对History对象的引用。History对象提供了一个接口，用于操作浏览器会话历史记录（在浏览器地址栏中访问的页面，以及通过当前页面中的框架加载的页面）。HTML5引入了history.pushState()和history.replaceState()方法，分别用于添加和修改历史条目。使用history.pushState()改变referrer，当用户发送XMLHttpRequest请求时在HTTP头中使用，改变状态后创建的XMLHttpRequest对象的referrer将被改变。因为referrer是在创建XMLHttpRequest对象时标识此所代表的window对象中文档的URL。然后我们就可以使用pushState来实现我们更新浏览器url的功能了。pushState()pushState()方法采用三个参数：一个状态对象、一个标题（当前忽略）和（可选）一个URL：状态对象—状态对象state是由pushState()历史条目创建的JavaScript对象。每当用户导航到新状态时，都会触发popstate事件，并且该事件的state属性包含历史条目的状态对象的副标题——Firefox目前忽略此参数，但将来可能会使用它。在这里传递一个空字符串应该是安全的，以防将来对此方法进行更改。或者，您可以为重定向状态传递一个短URL——此参数定义新的历史URL记录。请注意，浏览器不会在调用pushState()后立即加载此URL，但它可能会在稍后加载此URL，例如当用户重新打开浏览器时。新URL不必是绝对路径。如果新URL是相对路径，它将被视为相对于当前URL。新URL必须与当前URL具有相同的来源，否则pushState()将抛出异常。该参数可选，默认为当前UR实现/***Setbrowserurl*pa??rams:queryObj(parameterobject)*/functionsetBrowserUrl(queryObj){//stringify是queryString的一个api，可以查看官网节点的详细信息，您还可以实现varurl=`${location.pathname}?${stringify(queryObj)}`history.pushState({url:url},'',url)}这样我们就可以在调用setBrowserUrl时也请求更改浏览器url的方法。接下来，我们可以监听浏览器url的变化。如果浏览器url有需要的请求参数，那么我们就根据请求参数请求数据。如果没有，我们就初始化页面，这样当我们查看一条记录或者一个小秘密的时候，我想把数据保存起来，分享给别人，是否可以实现？总结基于H5的历史，可以实现很多优雅的工具，比如路由，缓存控制等等。本文转载自微信公众号《趣谈前端》
