当用户选择所需颜色时，页面刷新后，我将如何存储元素的颜色？实质上，颜色需要保持用户在页面刷新之前选择的颜色相同。
当选择了颜色时，我可以更改颜色。
.HTML
<body onload="changeColor()">
<h1 id="Myelement">This is a heading</h1>
<input type="color" id="get_color" onchange="changeColor()">
脚本
<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>
您的错误似乎在加载时将调用的行<body onload="changeColor()">中。在changeColor()内，它将始终获得在页面加载时恰好始终相同的$colorPickerElement.value，除非您从服务器生成的 HTML 呈现不同的值，听起来情况并非如此。
而是调用另一个函数来获取页面加载时保存的值，并使用该值(如果存在)。更改选取器值时，请继续使用现有函数。
.HTML
<body onload="onLoad()">
<h1 id="Myelement">This is a heading</h1>
<input type="color" id="get_color" onchange="changeColor()" />
</body>
脚本
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';
}
您可以使用localStorageAPI 将信息存储在用户的浏览器存储中。这将仅链接到您的网站。
您特别需要localStorage.getItem()和localStorage.setItem()。
其他资源：
- https://javascript.info/localstorage
- https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage