概述
- pushState()存储当前历史记录点，replaceState()替换当前历史记录点，popstate监听当前历史记录点。
-
pushState()，replaceState()是window.history对象中的方法，其中history是window中用来获取History的对象引用，History对象提供了操作浏览器的会话历史，window.history是只读属性。 - pushState()和replaceState()用来添加和修改历史记录中的条目，通常与popstate一起使用。
使用history.pushState()可以改变referrer，它在用户发送XMLHttpRequest请求时在HTTP头部使用，改变state后创建的XMLHttpRequest对象的referrer都会被改变。因为referrer是标识创建XMLHttpRequest对象时this所代表的window对象中document的URL。 - onpopstate事件
当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。在前进和后退时，或者history.back()或者history.forward()调用会触发popstate()事件。注意：当页面重新加载时，页面会接收一个onload事件，但没有 popstate 事件。不会执行onpopstate，你可以读取当前历史记录项的状态对象state，而不必等待popstate 事件， 只需要这样使用history.state 属性：
let currentState = history.state;
api使用方法
-pushState(state， title， url)
接收三个参数：一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL.
- 状态对象 状态对象state是一个JavaScript对象，
- 标题 网页标题
- URL 状态对象对应的URL，定义了新的历史URL记录。
通过pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态，popstate事件就会被触发。
-
replaceState(state, title, url)
接收三个参数：一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL.(同pushState)
不同是在：replaceState是对当前状态对象的修改。
popstate事件
当活动历史记录条目更改时，将触发popstate事件。在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()或者history.forward()方法）。
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/History_API
网友评论