根据状态设置切换按钮的背景

<button id="toggleButton">Toggle</button>

#toggleButton {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.active {
    background-color: green;
    color: white;
}

.inactive {
    background-color: red;
    color: white;
}

document.getElementById('toggleButton').addEventListener('click', function() {
    this.classList.toggle('active');
    this.classList.toggle('inactive');
});

window.onload = function() {
    var button = document.getElementById('toggleButton');
    var isActive = localStorage.getItem('buttonState') === 'active';
    if (isActive) {
        button.classList.add('active');
        button.classList.remove('inactive');
    } else {
        button.classList.add('inactive');
        button.classList.remove('active');
    }
};

document.getElementById('toggleButton').addEventListener('click', function() {
    this.classList.toggle('active');
    this.classList.toggle('inactive');
    localStorage.setItem('buttonState', this.classList.contains('active') ? 'active' : 'inactive');
});