Save values of html elements in cookies or something

I have a button that toggles my background, how would i be able to save the opacity of the background so you dont have to push the button to disable/enable it every time you load the a new page/refresh the page.

<div id="bg" style="transition: all 0.2s ease-in-out;" class="bg"></div>
<button class="bg-toggle" id="test-button">
    </button>

    <button class="bg-toggle" style="background-color: red; left: 95%;" id="test-button2">
    </button>
</body>

<script>
    const bg = document.querySelector('#bg');

    console.log(bg.style);
    bg.style.opacity = '100%';

    const testBtn = document.querySelector('#test-button');
    const testBtn2 = document.querySelector('#test-button2')

    console.log(testBtn.style);

    testBtn2.style.opacity = '0';
    
    testBtn.addEventListener('click', () => {
        bg.style.opacity = '0%';
        testBtn.style.opacity = '0%';
        testBtn.style.top = '-10000%';
        testBtn2.style.opacity = '100%';
        testBtn2.style.top = '92%';
    });

    testBtn2.addEventListener('click', () => {
        bg.style.opacity = '100%';
        testBtn.style.opacity = '100%';
        testBtn.style.top = '92%';
        testBtn2.style.top = '-10000%';
        testBtn2.style.opacity = '0';
    });
</script>

I have no idea where to start