History Api一文详解

什么是History Api呢？

History Api就是window对象通过history对象提供的一个属性和方法的集合，允许开发者基于js操作用户浏览历史的前进、后退、刷新等浏览历史操作，同时提供了对浏览记录栈的操作。

1. back

// 返回
const back = document.getElementById('back');
back.addEventListener('click', function () {
    window.history.back()
})

history.back()方法用来在不刷新页面的情况下基于浏览历史记录后退到上一个页面。

2. forward

// forward
const forward = document.getElementById('forward')
forward.addEventListener('click', () => {
    window.history.forward();
})

history.forward()方法用来在不刷新页面的情况下基于浏览记录前进到下一个页面。

3. go

history.go()方法有多种用法，可以实现back,forward的功能，还可以实现刷新当前页面的功能。

• 后退

const goBack = document.getElementById('goBack');
goBack.addEventListener('click', () => {
   window.history.go(-1)
})

• 前进

const goForawrd = document.getElementById('goForawrd');
goForawrd.addEventListener('click', () => {
   window.history.go(1)
})

• 刷新当前页

const reload = document.getElementById('reload');
reload.addEventListener('click', function () {
    window.history.go(0)
})

4. 栈操作

HTML5在History Api新增了pushState、replaceState用来对浏览记录栈的操作。

4. 1 pushState

history.pushState(state, title, url):用来在不刷新页面的情况下向浏览记录添加一条新记录。

• state: 新记录state对象，可以用来传值。
• title: 新记录的标题，目前好像被忽略没用。
• url: 新记录的地址。

const pushState = document.getElementById('pushState');
pushState.addEventListener('click', () => {
    const state = {
      msg: 'test pushState'
    }
    // 添加
    window.history.pushState(state, 'null', 'stateOne')
})

假如我们现在页面地址：http://localhost:3001/history/index.html

执行完上面的操作，我们的地址将变为：http://localhost:3001/history/stateOne

4. 2 replaceState

history.replaceState(state, title, url):用来在不刷新页面的情况下，以当前url替换地址栏活动项state的url, 以当前state替换处于活动的state，并不添加新历史记录。

const replaceState = document.getElementById('replaceState');
replaceState.addEventListener('click', () => {
    const state = {
      msg: 'test replaceState'
    }
    // 添加
    window.history.pushState(state, 'null', 'stateTwo')
})

假如我们现在的地址栏地址：http://localhost:3001/history/stateOne

执行上面的替换操作，地址栏将变为：http://localhost:3001/history/stateTwo, 此时，浏览记录history.length并不会发生变化。

4. 3 onpopstate事件

onpopstate是windown的事件处理对象，每当处于激活状态的历史记录条目发生变化时就会触发onpopstate事件。

注意: pushState和replaceState并不会触发onpopstate事件。onpopstate事件只有在浏览器的一些行为中被触发，如点击浏览器地址栏前进后退按钮、js调用history.back(),history.forward()方法。

// 监听history state变化
window.onpopstate = function (state) {
    // 浏览记录长度
    console.log(window.history.length)
    // 当前处于活动state
    console.log(window.history.state)
    // onpopstate事件发生时，处于活动项记录的state拷贝
    console.log(state)
}

5. History Api的应用

前端路由vue-router、react-router等都是基于History Api的实现，主要依赖pushState和replaceState在不刷新页面的情况下修改地址栏url，并根据活动state匹配渲染前端路由配置页面组件。