History 对象的pushState()和replaceState()

一.概述

history 对象保存了当前窗口访问过的所有页面网址。

二、属性

上图中，

• length 属性表示当前窗口一共访问了5个网址；
• scrollRestoration 滚动恢复属性允许web应用程序在历史导航上显式地设置默认滚动恢复行为。该属性有两个可选值，默认为auto，将恢复用户已滚动到的页面上的位置。另一个值为：manual，不还原页上的位置，用户必须手动滚动到该位置；
• state 返回一个表示历史堆栈顶部的状态的值，这是一种可以不必等待popstate事件而查看状态的方式。

二、pushState（state, title, url）与replaceState（state, title, url）

• pushState：该方法中前两个参数如果不需要的话可以为null，第三个参数为需要添加的网址，必须与当前页面处在同一个域。

当前页用百度 https://www.baidu.com/ 为例，当我们操作了history.pushState(null,null,‘2.html’)，可以看到窗口变化如下图：

如图，当我们操作了history.pushState(null,null,‘2.html’)，地址栏立马显示为我们添加的地址了，但页面并不会刷新，不会重新请求html，它只是在history的栈顶添加了一条记录，其它什也不会做。

我们点击浏览器的返回或通过history.go(-1)或者history.back()，浏览器地址会变为：https://www.baidu.com/。（回到之前访问过的页面，浏览器通常会使用之前的缓存，而不是重新向服务器请求新的网页）

• replaceState：该方法与pushState的不同之处在于，它是用新的url替换掉history栈顶的一条记录，其它与pushState都一样。如下图：
  
  当我们通过pushState在history的栈顶添加了‘2.html’，再用replaceState将栈顶的2.html换成3.html，这时我们再操作返回，浏览器地址栏就显示为 “https://www.baidu.com/ ”，而没有显示为“https://www.baidu.com/ 2.html”。

三、popstate 事件

当用户点击浏览器上的 【前进】、【后退】按钮，以及通过history.go()、history.back()、history.forward()、location.hash 时会触发popstate事件，通过调用pushState和replaceState不会触发popstate事件。

四、理解

• window.history对象是不可手动修改变更的，比如window.history={}赋值操作无效；
• history.length代表浏览器历史列表中的URL数量，这个数量最大值为50；
• location.href与history.pushState的相同与区别：
  ①location.href与pushState都会往history历史栈中添加一条记录；
  ②location.href跳转页面后会发起新的文档请求，而pushState不会；
  ③href可以跳至不同域页面，pushState添加不同域url会报错；

参考：
https://toutiao.io/posts/m9tfn9l/preview；
https://blog.csdn.net/yexudengzhidao/article/details/101448168