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

Question

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 onload="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>

*"How would i store the color of an element"* - Are you not already doing that by setting a value in `localStorage`? — David, Sep 27 '22 at 13:31
Does this answer your question? [How to store objects in HTML5 localStorage/sessionStorage](https://stackoverflow.com/questions/2010892/how-to-store-objects-in-html5-localstorage-sessionstorage) — Yogi, Sep 27 '22 at 13:33
Hi @David, i am not sure if i am doing something wrong in the code, after refresh it just reverts back to its original color. I cannot see where i am going wrong to be frank! — Gareth159753, Sep 27 '22 at 13:35
@Gareth159753: Well, you've written a value to `localStorage`. But where do you *read* that value from `localStorage`? When the page loads, what specific code are you expecting to read that value and set the element color? — David, Sep 27 '22 at 13:36
Hi @David, if i am not mistaken, is it not this line of code that retrieves the value from localStorage? document.getElementById("Myelement").style.color = localStorage.getItem("color"); — Gareth159753, Sep 27 '22 at 13:40
@Gareth159753: But that's happening inside the `onchange` handler function, so it won't execute until the user changes that input. **Edit:** I see it's also happening `onload`, but it's explicitly setting the value that's in the input, not what was in storage previously. — David, Sep 27 '22 at 13:49
You need to set the value of the `get_color input` on page load to be the value of the `localStorage` if it exists — StudioTime, Sep 27 '22 at 13:50

score 2 · Answer 1 · answered Sep 27 '22 at 13:52

Your error appears to be in the line <body onload="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 onload="onLoad()">
  <h1 id="Myelement">This is a heading</h1>

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

Script

function onLoad() {
  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';
}

score 1 · Answer 2 · answered Sep 27 '22 at 13:37

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:

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

2 Answers2