[sty-wolf]

имеется условие

<div class="product__quantity"></div>
			<button class="product__add-to-cart-button" data-sb-id-or-vendor-code="0032pz" data-sb-product-size="32" data-sb-product-name="Пицца «Ветчина и грибы»" data-sb-product-price="320" data-sb-product-quantity="1" data-sb-product-img="smartbasket/img/pizza.png">
				<i class="fas fa-cart-plus"></i> <span data-sb-id-button="0032pz">Добавить в корзину</span>
			</button>
		</div>

if (productsArr[sbId] !== undefined) {
					$('span[data-sb-id-button="'+sbId+'"]').text('Добавить в корзину');//Меняем текст
					$(this).addClass('button-active'); // добавляем цвет
				} else {
					$('span[data-sb-id-button="'+sbId+'"]').text('Удалить из корзины');//Меняем текст
					$(this).removeClass('button-active'); // удалить цвет
				}

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

Как сделать чтоб текст и кнопка не сбрасывались после перезагрузки страницы?

111.jpg