window.addEventListener("load", () => {
            const $elBtnStateChange = document.getElementById("btn-statechange");
            const $elConsole = document.getElementById("console");
        
            $elBtnStateChange.addEventListener("click", () => {
                history.go(-1);
            });
            
            window.addEventListener("popstate", e => {
                console.log("popstate fired");
                $elConsole.children[0].textContent = history.length;
                $elConsole.children[1].textContent = location.href;
                $elBtnStateChange.addEventListener("click", () => {
                    history.go(-1);
                }, { once: true });
            });    
        
            let data1 = { pageid: 1 };
            let data2 = { pageid: 2 };
            let url1 = "#page1";
            let url2= "#page2";
            history.pushState(data1, "", url1);
            history.pushState(data2, "", url2);
            
            $elConsole.children[0].textContent = history.length;
            
        });