JQuery сохранить URL-адреса в истории с помощью функции AJAX

Question

Я работаю над своим кодом jquery, чтобы вернуться на предыдущую страницу и на следующую страницу, когда я нажал на иконку «Назад» и «Вперед» в браузере. У меня проблема с моим кодом, потому что он не позволяет мне вернуться на предыдущую страницу, когда я использую window.history.pushState и window.history.replaceState для изменения и обновления URL-адреса каждый раз, когда я нажимаю напривязывать теги, и когда я нажимаю на тег span, чтобы открыть свою электронную почту, затем нажимаю на значок «Назад» в браузере. Когда я нажимаю на значок пересылки после того, как открываю свою электронную почту, она не переходит на следующую страницу, поскольку URL-адрес пуст.

Когда я пытаюсь это сделать:

$(window).on('popstate', function(e) {

    var hash    = window.location.hash;
    var mailfolder = hash.split('/')[0].replace('#', '');
    var encryption = hash.split('/')[1];


    if (window.location.hash == '#inbox/'+emailid) {

        if (table_rowcounts > 12) {
            $(".lg-side").css("overflow-y", "scroll");
        }
        stateData = {
            path: window.location.href,
            scrollTop: $(window).scrollTop()
        };
        window.history.replaceState(stateData, 'Title', 'http://example.com/#inbox');

        stateData = {
            path: window.location.href,
            scrollTop: 0
        };
        window.history.pushState(stateData, 'Title', 'http://example.com/#inbox');

        if($('.tbody_maillist tr').length === 0)
        {
            inbox();
        }
        $(".bottom_space").show();
        $(".emailMessages").hide();
        $(".emailBodyShowUp").hide();
        $("#opt_selectall").show();
        $("#opt_refresh").show();
        $("#next_prevButton").show();
        $('.tbody_maillist').show();
        mailbox_files = '';
        window.history.back();
    }
});

Я будуиметь возможность вернуться на предыдущую страницу, когда я щелкну значок браузера "назад", но я не смогу перейти на следующую страницу, когда нажму значок браузера вперед.

Index.php:

<div id="inbox" style="width: 100%;">
    <li>
        <span><a href="http://example.com/#inbox" target="_top" title="Inbox" tabindex="-1" draggable="false"><i class="fa fa-inbox"></i> Inbox <span id="inbox_total" name="inbox_total" class="label label-danger pull-right"><?php echo $total_inbox_unread; ?></span></a></span>
    </li>
</div>

<td id='subject'>
    <div id='email_subject'>$inbox_subject</div>
</td>

client.js

$(document).on('click', '#inbox', function(e) {
    inbox();
});

function inbox() {

    dataType: 'json',
        beforeSend: function () {
           //if (currentRequest != null) currentRequest.abort();
           if (currentRequest != null) {
               alert("it is time to reconnect to the inbox");
           }
        },
        success: function(res) {
            currentRequest = null;
            $('#inbox_total').html(res.data.total_inbox);
            $('#draft_total').html(res.data.total_draft);
            $('#spam_total').html(res.data.total_spam);
            $('title').text('Inbox (' + res.data.total_inbox + ') - ' + $('#avater_email').text());
            rowCount = res.data.total;

            if (window.location.href.indexOf('#inbox') == -1) {
                history.replaceState(undefined, undefined, "http://example.com/#inbox");
            }

            if (window.location.href.indexOf('#') >= -1) {
                history.replaceState(undefined, undefined, "http://example.com/#inbox");
            }
        }



$(document).on('click','#email_subject', function(e) {

    readMail(email_number, folder, start_idx);
});




function readMail(email_number, folder, start_idx) {

    var hash = window.location.hash;
    var total_index = $('#label_total').text();
    var inbox_unread = $('#inbox_total').text();

    $.ajax({
        url: 'readMail.php',
        type: 'POST',
        data : {
            mailfolder: mailfolder,
            email_number: email_number,
            encryption: encryptedAES,
            readmail: readmail
        },
        dataType: 'json',

        success: function(res) {
            $('.tbody_maillist').hide();
            var emailMessage_body = "<div id=" + email_number + " class='emailBody' style='width: 99%;'>"...etc

            if (window.location.hash == '#inbox') {
                stateData = {
                    path: window.location.href,
                    scrollTop: $(window).scrollTop()
                };
                window.history.replaceState(stateData, 'Title', 'http://example.com/#inbox/'+encryptedAES);

                stateData = {
                    path: window.location.href,
                    scrollTop: 0
                };
                window.history.pushState(stateData, 'Title', 'http://example.com/#inbox/'+encryptedAES);
                $('#goBack').attr('data-original-title','Back to Inbox');
            }
        }
    }

Я использую функции для вызова функции ajax, чтобы открывать и получать свои электронные письма, когда я нажимаю натег привязки, а также когда я нажимаю на тег span, чтобы открыть мои электронные письма. Я предполагаю, что мне нужно будет использовать функцию для отправки запроса на сохранение URL-адресов в истории, чтобы я мог вернуться к предыдущей странице и следующей странице, когда я нажал на значок «Назад» и значок «Вперед» в браузере. , но я не совсем уверен, почему это не работает.

Не могли бы вы показать мне пример того, как наилучшим образом я должен использовать, чтобы сохранить URL-адреса в истории, чтобы я мог вернуться назад? на предыдущую и следующую страницу каждый раз, когда я использую window.history.pushState и window.history.replaceState для изменения и обновления URL-адреса в строке URL-адреса?

Спасибо.