history.pushState()

EC前端 - history.pushState()

描述

history.pushState()方法可以无刷新地向当前history插入一条历史状态。

什么是历史状态（history state）？

历史状态就是你在浏览器的当前Tab页中加载的页面，这些页面以时间作为先后顺序排列，称为历史状态列表。

历史状态分为两种：

• 由传统的网页加载生成的历史状态，即向服务器请求新的页面.
• 通过pushState()方法生成的历史状态，并不会向服务器请求新页面。

有了历史状态，浏览器的前进后退按钮就处于可用状态，可以在历史状态之间来回跳转。

注意：刷新不会产生历史状态。

语法

history.pushState(stateObject, title, url);

参数

参数	描述
stateObject	传入的状态对象。当前进（后退）到某一新的状态时，会触发popstate事件。此事件对象event.state存储的就是这个stateObject的值。
title	新状态的标题。（目前，大多数浏览器并不支持该参数，建议传null值）
url	状态对应的历史记录的地址。

pushState有什么用？

或者说，为什么需要无刷新地插入一条历史状态。

随着Ajax技术的普及，尤其是单页面应用的流行。网页对数据的加载更多的是通过无刷新的异步加载来完成。这样确实大大提升了用户体验，但也造成了一个困扰。

要知道，Ajax加载数据并不会生成历史状态，前进后退按钮也就无法激活，那现在我要后退到上一次展示数据的状态，该怎么回去呢？

答案很明显，就是在完成一次Ajax请求的同时，为浏览器创造一个历史状态。history.pushState()要做的就是这件事！

pushState的应用场景案例：

现在有一个报表应用用于展示某年的销售数据：

刚打开时，没有任何报表数据：

一季度	二季度	三季度	四季度	总和
无	无	无	无	无

假定此时的URL: http://example.com/getFinaData.php

点击按钮通过Ajax加载2015年的数据

一季度	二季度	三季度	四季度	总和
122万	147万	135万	153万	557万

同时我们为这一次数据加载新增一条历史状态：

history.pushState({year: 2015}, "页面标题", "getFinaData.php?year=2015");

此时的URL变为：http://example.com/getFinaData.php?year=2015

同时你会发现浏览器的后退按钮激活了，而网页并没有请求服务器。因为在pushState()的作用下无刷新地新增了一条历史状态。

点击按钮通过Ajax方式加载2018年的数据

四月份	五月份	六月份	总和
15万	10万	11万	36万

重复上一步，我们再为这一次数据加载新增一条历史状态：

history.pushState({year: 2018}, "页面标题", "getFinaData.php?year=2018");

此时的URL变为：http://example.com/getFinaData.php?year=2018

现在，我们使用后退键，看看会发生什么？

URL重新变回：http://example.com/getFinaData.php?year=2015

但是，界面并没有发生变化（表格依旧显示的是2018年的数据）。

因为点击后退键只是简单地切回到上一个状态，而这个状态是无刷新的，我们要做的捕获这个切换到的状态，并获取上一次保存的状态值（pushState()的第一个参数），然后再调用一次ajax请求数据

浏览器提供了popState事件用于捕获前进后退时切换到的状态。上一次保存的状态值（pushState()的第一个参数）保存在事件对象event.state中。

window.onpopstate = function(event) {
  // 获取存储的状态
  var params = event.state; // {year: 2015}
  
  // 根据存储的状态，再次使用Ajax加载数据并插入到视图中
  
  // ...具体代码省略
};

现在，成功实现无刷新后退到上一次界面：

一季度	二季度	三季度	四季度	总和
122万	147万	135万	153万	557万