Question 72376 in Html Question posted in
Some basic documentation can be found here.

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

Tags:

2

Answers


  1. 0

    first retrive background opacity value from localStorage by getItem mehod. Then, If the value exists, set as the opacity of the background. when user click button to toggle background, set the new opacity value into localStorage. I hope it is useful for you:)

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


// Retrieve the opacity value from localStorage, if it exists
const savedOpacity = localStorage.getItem('bg-opacity');
if (savedOpacity !== null) {
  bg.style.opacity = savedOpacity;
}

testBtn2.style.opacity = '0';

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

  // Save the opacity value to localStorage
  localStorage.setItem('bg-opacity', bg.style.opacity);
});

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

  // Save the opacity value to localStorage
  localStorage.setItem('bg-opacity', bg.style.opacity);
});
    Login or Signup to reply.
  2. 0

    LocalStorage API can be used to store and retrive the opacity of the background and i have removed the unwanted css rules

    Use the code in your local system because, here you wont’t run due to some restrictions.

    DOC HERE

    const bg = document.querySelector("#bg");
const testBtn = document.querySelector("#test-button");
const testBtn2 = document.querySelector("#test-button2");
const opacity = localStorage.getItem("opacity");
console.log(opacity);
if (opacity) {
  bg.style.opacity = opacity;
  testBtn.style.opacity = opacity;
  testBtn2.style.opacity = opacity == 0 ? 1 : 0;
}

testBtn.addEventListener("click", () => {
  localStorage.setItem("opacity", 0);
  bg.style.opacity = 0;
  testBtn.style.opacity = 0;
  testBtn2.style.opacity = 1;
});

testBtn2.addEventListener("click", () => {
  localStorage.setItem("opacity", 1);
  bg.style.opacity = 1;
  testBtn.style.opacity = 1;
  testBtn2.style.opacity = 0;
});
    .bg {
        background-color: grey;
        width: 200px;
        height: 200px;
    }
    <div id="bg" style="transition: all 0.2s ease-in-out" class="bg"></div>
<button class="bg-toggle" id="test-button">test 1</button>
<button class="bg-toggle" id="test-button2">test 2</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search