如何在浏览器上返回按钮以正确使用AJAX？

Question

我的公司网站上有一个带有ajax调用的页面。它工作得很好，但发现一个错误，发现单击浏览器中的后退按钮只是重新加载页面，而不是转到上一页这里是我的代码：

    function openTab(evt, tabName, url, title) {
//$('.action').attr('checked', false);
//$('.sub-action').attr('checked', false);
//$('.actionbutton').addClass('turnedoff').attr('value','false');
//$('.selected').removeClass('selected').addClass('unselected');
//$('.selected-sub').removeClass('selected-sub').addClass('unselected-sub');
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
document.getElementById('tab' + tabName).className += " active";
document.title = title;
history.pushState({},document.title, window.location.protocol + '//' + window.location.hostname + url);
 }

(function ($) {
jQuery(document).ready(function($){
    $.getJSON( "/register/?ajax=true", function( data ) {
        $("#welcome").html(data.tabs.welcome);
        $("#dog").html(data.tabs.dog);
        $("#litter").html(data.tabs.litter);
        var useDefaultTab = true;
        if(typeof(sessionStorage)!=="undefined" && typeof(sessionStorage.actionURL)!=="undefined" && sessionStorage.actionURL != 'false')
        {
            var selected = $("input[value='" + sessionStorage.actionURL + "']");
            if(selected.length)
            {
                useDefaultTab = false;
                $('.tab' + selected.parents('.tabcontent').attr('id')).click();
                selected.prop('checked',true);
                $('.actionbutton').removeClass('turnedoff').attr('value',sessionStorage.actionURL);
                if(selected.hasClass('sub-action'))
                {
                    selected.closest('ul ul li').removeClass('unselected-sub').addClass('selected-sub');
                    var selectedParent = selected.parents('li.unselected').find('.action');
                    selectedParent.prop('checked',true);
                    selectedParent.closest('li').removeClass('unselected').addClass('selected');
                }
                else
                {
                    selected.closest('li').removeClass('unselected').addClass('selected');
                }

            }

        }

        if (useDefaultTab)
        {
            $('.action').prop('checked', false);
            $('.sub-action').prop('checked', false);
            var params = {};
            window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) {
              params[key.toLowerCase()] = value;
            });
            var segments = window.location.pathname.toLowerCase().split('/');
            if (params.activity == 'litter' || segments[2] == 'litter')
            {
                document.getElementById("tablitter").click();
            }
            else if (params.activity == 'puppy' || segments[2] == 'dog')
            {
                document.getElementById("tabdog").click();
            }
            else
            {
                // Get the element with id="defaultOpen" and click on it
                document.getElementById("tabwelcome").click();
            }
        }

        window.onpopstate = function(event) {
          window.location.href = document.location;
        };

        $('li .action').change(function(){
            // Locate parent li, swap .unselected and .selected classes
            var li = $(this).closest('li');
            url = $(this).attr('value');
            if (li.hasClass('unselected')) {
                $('.selected').removeClass('selected').addClass('unselected');
                $('ul ul .selected-sub input').removeAttr('checked');
                $('ul ul .selected-sub').removeClass('selected-sub').addClass('unselected-sub');
                li.removeClass('unselected').addClass('selected');
            } else {
                if (li.hasClass('selected')) li.removeClass('selected').addClass('unselected');
            }
            if (url == "false") {
                $('.actionbutton').addClass('turnedoff').attr('value','false');
            } else {
                $('.actionbutton').removeClass('turnedoff').attr('value',url);
            }
        });
        $('li .sub-action').change(function(){
            // Locate parent li, swap .unselected and .selected classes
            var li = $(this).closest('ul ul li');
            url = $(this).attr('value');
            if (li.hasClass('unselected-sub')) {
                $('ul ul .selected-sub').removeClass('selected-sub').addClass('unselected-sub');
                li.removeClass('unselected-sub').addClass('selected-sub');
            } else {
                li.children('input').removeAttr('checked');
                if (li.hasClass('selected-sub')) li.removeClass('selected-sub').addClass('unselected-sub');
            }
            if (url == "false") {
                $('.actionbutton').addClass('turnedoff').attr('value','false');
            } else {
                $('.actionbutton').removeClass('turnedoff').attr('value',url);
            }
        });

        $('.actionbutton').on('click',function(){
            if ($(this).attr('value') == "false") return false;
            if(typeof(sessionStorage)!=="undefined")
            {
                sessionStorage.actionURL=$(this).attr('value');
            }
            document.location = $(this).attr('value');
        });


    });         
});
 })(jQuery);

我查了几个地方，它说要使用history.replaceState(null, null, '');对象来实现这个目标，但它不起作用。我有它在正确的地方吗？还是它应该在我的功能中的其他地方？