选择框值存入localStorage多页面复用失效，需补充代码吗？

你的代码存在两个核心问题，导致无法正常工作：

• 逻辑顺序颠倒：页面加载时你先将select的初始值存入localStorage，再读取判断，这会覆盖之前存储的用户选择；正确逻辑应该是优先读取已存储的值，用来初始化页面配色和select状态。
• 缺少交互监听：当前代码仅在页面加载时执行一次，用户切换select选项时不会触发存储更新和配色切换。

修正后的完整代码 #

HTML部分

<select id="colorScheme" name="colorMode"> 
    <option value="light">Light Mode</option>
    <option value="dark">Dark Mode</option>
</select>

JavaScript部分

// 页面加载时初始化
const colorSchemeSelect = document.querySelector("#colorScheme");

// 优先读取localStorage中的值
const savedScheme = localStorage.getItem("colorScheme");
if (savedScheme) {
    // 设置select的选中状态
    colorSchemeSelect.value = savedScheme;
    // 初始化对应配色
    savedScheme === "light" ? initLightMode() : initDarkMode();
} else {
    // 首次访问，默认使用light模式并存储
    localStorage.setItem("colorScheme", "light");
    initLightMode();
}

// 监听select的切换事件
colorSchemeSelect.addEventListener("change", function() {
    const selectedScheme = this.value;
    // 更新localStorage
    localStorage.setItem("colorScheme", selectedScheme);
    // 切换配色方案
    selectedScheme === "light" ? initLightMode() : initDarkMode();
});

关键说明 #

1. 初始化逻辑：页面加载时先检查localStorage是否有用户之前保存的配色，有则直接复用；无则设置默认值并初始化。
2. 交互监听：通过change事件监听用户的选择操作，实时更新存储并切换配色，确保用户的选择立即生效且被记住。

内容的提问来源于stack exchange，提问作者drinos