如何在页面刷新后保留用户选择的HTML元素颜色？

架构老林

2026-8-18

解决页面刷新后保留元素选中颜色的问题

你的现有代码存在一个关键问题：页面刷新调用changeColor()时，会读取颜色选择器的默认值并覆盖localStorage中保存的用户选择颜色，导致刷新后颜色重置。下面是修正方案：

修正思路

拆分逻辑：将「页面初始化读取保存的颜色」和「用户选择颜色更新存储」分成两个独立函数
页面加载时优先读取localStorage中的颜色，同步到元素和颜色选择器
用户选择颜色时仅更新存储和元素颜色，避免覆盖已有保存值

修正后的代码

HTML

<body onload="initColor()">
   <h1 id="Myelement">This is a heading</h1>

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

JavaScript

// 页面初始化时加载保存的颜色
function initColor() {
  const savedColor = localStorage.getItem("color");
  const targetElement = document.getElementById("Myelement");
  const colorPicker = document.getElementById("get_color");

  // 如果有保存的颜色，同步到元素和选择器
  if (savedColor) {
    targetElement.style.color = savedColor;
    colorPicker.value = savedColor;
  }
  // 过渡样式只需设置一次
  targetElement.style.transition = "all 1s";
}

// 用户选择颜色时更新存储和元素
function changeColor() {
  const selectedColor = document.getElementById("get_color").value;
  localStorage.setItem("color", selectedColor);
  document.getElementById("Myelement").style.color = selectedColor;
}