多页面LocalStorage值重置：暗黑模式状态无法跨页保留

核心问题 #

你的代码存在两个关键问题：

1. 页面加载时未同步样式：仅在页面加载时读取localStorage打日志，但没有将对应的样式应用到元素上。导致FAQ页面加载时，元素保持默认样式，后续操作会错误判断模式状态，重置localStorage的值。
2. 依赖内联样式判断模式：element.style.color只能获取元素的内联样式，如果初始样式来自CSS类而非内联设置，判断逻辑会失效，进而错误修改localStorage。

修复步骤 #

1. 统一模式判断与样式应用逻辑 #

修改代码，让页面加载时直接根据localStorage的值设置元素样式，同时用localStorage的状态作为判断依据，而非元素的内联样式：

// 获取元素（确保所有页面的选择器一致）
const toggleBtn = document.querySelector('#mode-toggle');
const targetElement = document.querySelector('#target-element'); // 替换为你的元素选择器

// 初始化页面样式
function initMode() {
    const savedMode = localStorage.getItem("mode") || "White"; // 默认白色模式
    if (savedMode === "Dark") {
        targetElement.style.color = "wheat";
        console.log("it's dark");
    } else {
        targetElement.style.color = "rgb(33,33,36)";
        console.log("it's white");
    }
}

// 切换模式逻辑
toggleBtn.addEventListener('click', () => {
    const currentMode = localStorage.getItem("mode") || "White";
    if (currentMode === "White") {
        targetElement.style.color = "wheat";
        localStorage.setItem("mode", "Dark");
        console.log("switched to dark");
    } else {
        targetElement.style.color = "rgb(33,33,36)";
        localStorage.setItem("mode", "White");
        console.log("switched to white");
    }
});

// 页面加载时初始化
initMode();

2. 确保元素选择器在所有页面一致 #

检查首页和FAQ页面的按钮、目标元素的选择器（比如id或类名）是否完全相同，避免出现某个页面找不到元素导致逻辑不执行的情况。

3. 验证同源性 #

确认所有页面属于同一个域名（包括子域名、协议、端口一致），localStorage是同源共享的，跨域页面无法共享数据。

关于Cookies的疑问 #

不需要改用Cookies，localStorage完全适合这种场景，只要解决上述逻辑问题即可正常工作。Cookies更多用于需要随HTTP请求发送的场景，这里用localStorage更合适。

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