Как сохранить внешний вид кнопки в session storage, чтобы он сохранялся после перезагрузки страницы

Question

Подскажи, пожалуйста, как сохранить кнопку в session storage, чтобы после перезагрузки страницы она оставалась неизменной.

вот какой кейс: есть кнопка с надписью КУПИТЬ, которая отрабатывает следующим образом:

При нажатии отправляет запрос на сервер
Если response.ok кнопке добавляется класс hasBeenPurchased, который меняет background-color и надпись на В КОРЗИНЕ.

Надо:

сохранить кнопку с надписью "В КОРЗИНЕ" в session storage
получить эту кнопку с надписью "В КОРЗИНЕ" после перезагрузки страницы

Answer 1

Примерно так:

function getCartKey(){
    return "cart"
}
function getCartItems(){
    return JSON.parse(sessionStorage.getItem(getCartKey())||'[]')
}

function addCurrentProduct(){
    const items = [...getCartItems(),getCurrentProduct()]
    sessionStorage.setItem(getCartKey(),JSON.serialize(items))
    render()
}
function render(){
    document.getElementsByClassName("cart").forEach(el=>{
        el.className = getCurrentProduct() in getCartItems() ? "В КОРЗИНЕ":"КУПИТЬ"
    })
}
function getCurrentProduct(){
    return document.location
}
...
render() // on load

БЛОГ НА HUSL

Как сохранить внешний вид кнопки в session storage, чтобы он сохранялся после перезагрузки страницы

Ответы (1 шт):