如何将选中的Div背景色存入LocalStorage并刷新后保留？

没问题，我帮你搞定这个需求——把选中的颜色存在LocalStorage里，刷新页面后自动恢复最后选中的状态。咱们一步步来修改你的代码：

1. 完善颜色选择的事件处理逻辑 #

首先，在用户选择颜色的input事件里，除了更新盒子的颜色和当前颜色显示，还要把选中的颜色存入LocalStorage：

const box = document.querySelector(".box");
const colorInput = document.querySelector("input");
const currentColorSpan = document.querySelector("#currentColorSpan");

colorInput.addEventListener("input", () => {
  const selectedColor = colorInput.value;
  // 更新盒子颜色
  box.style.backgroundColor = selectedColor;
  // 更新当前颜色文本显示
  currentColorSpan.textContent = selectedColor;
  // 把颜色存入LocalStorage，用固定key标识存储项
  localStorage.setItem("selectedColor", selectedColor);
});

2. 添加页面初始化的恢复逻辑 #

接下来，在页面加载完成后，立即从LocalStorage读取之前保存的颜色，如果存在就应用到对应元素；如果是首次打开页面没有存储记录，就设置一个默认颜色（比如白色#ffffff）：

// 页面加载完成后执行恢复逻辑
window.addEventListener("load", () => {
  // 从LocalStorage获取保存的颜色
  const savedColor = localStorage.getItem("selectedColor");
  // 有保存值就用保存值，否则用默认色
  const targetColor = savedColor || "#ffffff";
  
  box.style.backgroundColor = targetColor;
  colorInput.value = targetColor;
  currentColorSpan.textContent = targetColor;
});

完整代码整合 #

把两部分代码合在一起就是完整的实现：

const box = document.querySelector(".box");
const colorInput = document.querySelector("input");
const currentColorSpan = document.querySelector("#currentColorSpan");

// 颜色选择事件处理
colorInput.addEventListener("input", () => {
  const selectedColor = colorInput.value;
  box.style.backgroundColor = selectedColor;
  currentColorSpan.textContent = selectedColor;
  localStorage.setItem("selectedColor", selectedColor);
});

// 页面加载时恢复保存的颜色
window.addEventListener("load", () => {
  const savedColor = localStorage.getItem("selectedColor");
  const targetColor = savedColor || "#ffffff";
  
  box.style.backgroundColor = targetColor;
  colorInput.value = targetColor;
  currentColorSpan.textContent = targetColor;
});

这样修改后，用户每次选择颜色都会自动存在浏览器的LocalStorage里，就算刷新页面或者关闭浏览器再打开，都会自动恢复最后一次选中的颜色啦。

内容的提问来源于stack exchange，提问作者Ahmed El Sheikh