Jquery Saving html contents in the history not working

I am working on my jquery script to save the contents in the history so I can go back to the previous page and next page. I have got a problem with my code because it will not save the html content as it will only save the url and change the url.

Here is the code:

$(function() {

    $(window).on('hashchange', function(e) {
        e.preventDefault();
        var hash = window.location.hash;
        var mailfolder = hash.split('/')[0].replace('#', '');
        var encryption = '';
        $(window).scrollTop(0);

        if (window.location.href.indexOf('/') > -1) {
        encryption = hash.split('/')[2];

        if (typeof encryption === 'undefined' | encryption === '')
        {
            encryption = hash.split('/')[1];
        }
    }


    if (mailfolder !== 'search')
    {
        if (window.location.href.indexOf('#inbox'+'/'+encryption) > -1) {
            $("#opt_selectall").hide();
            $("#opt_refresh").hide();
            $(".bottom_space").hide();
            $(".emailMessages").show();
            $(".emailBodyShowUp").show();
            $(".lg-side").css("overflow-y", "hidden");
            $(".emailMessages").scrollTop(0);
        }
     }
     else if (window.location.href.indexOf('#'+mailfolder) > -1) {
         if($('.tbody_maillist tr').length > 0) {
             $(".bottom_space").show();
             $(".emailMessages").hide();
             $(".emailBodyShowUp").hide();
             $("#opt_selectall").show();
             $("#opt_refresh").show();
             $("#next_prevButton").show();
             $('.tbody_maillist').show();
             mailbox_files = '';
         }
     }
 }



function inbox() {
var title = $(this).text();
var html = document.body.innerHTML;


stateData = {
    content: html,
    title: title,
    path: window.location.href,
    scrollTop: 0
};

if (window.location.href.indexOf('#inbox') > -1) {
    window.history.pushState(stateData, title, 'http://example.com/#inbox');
}


$(window).on('popstate', function(e) {
    if (e.state) {
        $("body").html(e.state.html);
        $("title").html(e.state.title);
    }
});

I have tried this:

var html = $('body').html();

It still wont let me to save the html contents in the history as it will show blank when I hit back icon button on the browser. I want to save the HTML contents in the history as I dont have to refresh or reload on the page when I hit the back icon button on the browser.

Can you please show me an example how I could save the HTML contents in the history so I could see the contents when I hit on the back icon button on the browser?

Thank you.