How would i store the color of an HTML element after page refresh-CodePudding

How would i store the color of an element, after page refresh when the user has selected the required color? In essence the color needs to stay the same color the user selected before page refresh.

I am able to change the color when a color has been chosen.

HTML

<body onl oad="changeColor()">
   <h1 id="Myelement">This is a heading</h1>

<input type="color" id="get_color" onchange="changeColor()">

Script

<script>

function changeColor() {
  let color_picker = document.getElementById('get_color').value;
  localStorage.setItem("color", color_picker);
  document.getElementById("Myelement").style.color = localStorage.getItem("color");
  document.getElementById("Myelement").style.transition = "all 1s";
}

</script>

CodePudding user response：

You can use the localStorage API to store information in the user's browser storage. This will be linked to your website only.

You'll specifically need localStorage.getItem() and localStorage.setItem().

Additional resources:

CodePudding user response：

Your error appears to be in the line <body onl oad="changeColor()"> that will be called on load. Within changeColor() it will always get the $colorPickerElement.value which happens to always be the same on page load, unless you are rendering a different value from the server generated HTML, and it sounds like this is not the case.

Instead call another function to get the saved value on page load and use that if it exists. When changing the picker value, continue to use the existing function.

HTML

<body onl oad="onLoad()">
  <h1 id="Myelement">This is a heading</h1>

  <input type="color" id="get_color" onchange="changeColor()" />
</body>

Script

function onl oad() {
  const color = localStorage.getItem('color');

  if (color) {
    document.getElementById('get_color').value = color;
    document.getElementById('Myelement').style.color = color;
  }
}

function changeColor() {
  const color = document.getElementById('get_color').value;
  localStorage.setItem('color', color);
  document.getElementById('Myelement').style.color = color;
  document.getElementById('Myelement').style.transition = 'all 1s';
}