Data on server doesn't update when i press “back” button in browser jquery ajax laravel

Question

So, the problem is:

When I press "purchase" button, it changes color and link for it and adds product to cart:

$(document).ready(function(c) {
    $('.item_add').click(function (event) {
    var addButton = $(this).children('p');
    if(addButton.hasClass('added'))
    {
        window.location.href="http://site.loc/cart";
    }

    else
    {
        event.preventDefault();
        var id = $(this).attr('id');
        var href = $(this).attr('href');
        var data = {'cart_item_id': id};
        var carturl = "http://site.loc/cart";

            $.ajax({
                url: href,
                data: data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'POST',
                dataType: 'JSON',
                success: function (html) {
                        addButton.addClass('added');
                        addButton.css('background', 'green');
                        addButton.parent('a').attr('href', carturl);
                        $('#addOrAlready').text('Added');
                }
            });
    }
});

Then, when i click this button, it gets me to cart, as supposed, BUT, when i press "back" button in browser, the page is same: button is not green, and link is not updated to /cart, data updates only when i RELOAD that page. Why data doesn't update when i go to cart? How to update it?

View:

<a href="{{$cart_items->contains('id',$productItem->id) ? route('IndexCart'): route('AddToCart')}}" class="item_add" id="{{$productItem->id}}">
    <p class="number item_price {{$cart_items->contains('id',$productItem->id) ? 'added': ''}}">
        <i> </i>${{$productItem->price}}
    </p>
</a>

Answer 1

后退按钮不一定更新 dom，它必须与此问题有关， 通过浏览器后退按钮到达时重新加载站点