【js/css】pushState和popState简明教程

pushState和replaceState

h5中提供了只修改地址栏、不修改页面内容的api:

• pushState(添加浏览历史),
• replaceState(修改当前浏览历史)，

popState事件在用户返回或前进进会被出发触发
history.pushState方法接受三个参数，依次为：
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。可用它来传一些数据
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
history.replaceState方法跟pushState一样只不过replaceState是修改当前的状态

popState的触发

仅仅调用pushState方法或replaceState方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
此事件可以添加一个回调函数，函数的第一个参数为事件,事件的state属性是pushState和replaceState中传递的第一个参数state
判断浏览器是否支持这些api,并添加一些记录,如下添加三个

        history.pushState('#1', null, '#1');
        history.pushState({ a: 1, b: 2 }, null, '#2');
        history.pushState('#3', null, '#3');
        window.onpopstate = function(event) {
            console.log('location: ' + document.location);
            console.log(event.state);
        };
        //另一种添加事件的方法
        window.addEventListener('popstate', function(event) {
            console.log('location: ' + document.location);
            console.log(event.state);
        });
        history.go(-1)//触发popstate

输出：

location: http://127.0.0.1:5501/30-dispatchEvent.html#2
{a: 1, b: 2}

在这里pushState和popState才建立了联系，popState存储了pushSatte的state备份，在事件里的state里放着