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>
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';
}
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: