Browser is caching Partial Dom from Ajax

I wrote some ajax that does an infinite scroll which works fine normally. When I scroll to the bottom of the page it update a hidden variable for the page number and appends data to a div. What's weird is that when I hit the back button the DOM retains the old page number, but it does not retain the data appended to the div.

function scrollListener(url, contentDivSelector, pageNumberSelector, totalNumberOfPages) {
if (parseInt($(pageNumberSelector).val()) <= parseInt(totalNumberOfPages)) {

    //Make sure your not already at the bottom of the page
    ExecuteConditionalScroll(url, contentDivSelector, pageNumberSelector);

    //unbinds itself every time it fires
    $(window).one("scroll", function () {
        ExecuteConditionalScroll(url, contentDivSelector, pageNumberSelector);

        //rebinds itself after 200ms
        setTimeout(function () { scrollListener(url, contentDivSelector, pageNumberSelector, totalNumberOfPages); }, 200);
    });
}
};

function ExecuteConditionalScroll(url, contentDivSelector, pageNumberSelector) {

if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
    $.ajax({
        url: url,
        data: { pageNumber: $(pageNumberSelector).val() },
        traditional: true,
        dataType: 'json',
        type: 'GET',
        success: function (data) {
            var pageCount = parseInt($(pageNumberSelector).val());

            pageCount++;

            $(pageNumberSelector).val(pageCount);

            $(contentDivSelector).append(data.htmldata)
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log("error:" + thrownError.toString())
        }
    });
}
}

Does anyone have a good idea on how to fix this, without using Local-Storage Or Cookies? Also, Does anyone know why this would happen?