popstate玩转浏览器历史记录
2022-09-26 21:20:21
简而言之就是HTML5新增的用来控制浏览器历史记录的api。
window.history 对象，该对象上包含有 length 和 state 的两个值，在它的 __proto__ 上继承有 back 、 forward 、 go 等几个功能函数
在 popstate 之前，我们可以利用 back 、 forward 、 go 对 history 进行后退和前进操作。
例如：
弊端：只能操作前进后退，但是无法控制前进后要去哪， history.length 都只会维持原来的状态
HTML5 的新 API 扩展了 window.history ，使历史记录点更加开放了。可以存储当前历史记录点 pushState 、替换当前历史记录点 replaceState 、监听历史记录点 popstate 。
pushState 、 replaceState 两者用法差不多。
使用方法：
replaceState用法类似，例如：
两者区别 ： pushState 会改变 history.length ，而 replaceState 不改变 history.length
通过下图我们可以对比看出 pushState 和 replaceState 的差别（注意看 history.length 的变化）：
当活动历史记录条目更改时，将触发 popstate 事件。如果被激活的历史记录条目是通过对 history.pushState 的调用创建的，或者受到对 history.replaceState 的调用的影响， popstate 事件的 state 属性包含历史条目的状态对象的副本。
可以理解为监听浏览器后退、前进的操作，只要后退或者前进就会触发。在上面的 demo 中，我们预先做了如下操作： 打开页面 → 点击“新闻” → 点击“音乐” → 再点击“新闻”，产生了4个 history 记录。然后监听浏览器后退和前进的状态变化，如下图所示：
热门标签
