解决表单按钮触发页面主题重置问题的教程

解决方案二：实现主题的持久化与初始化加载

仅仅阻止页面刷新并不能完全解决问题，因为用户可能在其他时间刷新页面或关闭浏览器后重新打开。为了确保主题偏好能够持久化，我们需要在页面加载时读取 localStorage 中的设置并应用它。

Lessie AI

一款定位为「People Search AI Agent」的AI搜索智能体

下载

初始主题加载逻辑

首先，我们需要在页面加载时检查 localStorage 中是否存在 color-mode 的设置。如果存在，就应用该设置；否则，使用HTML中定义的默认值（或一个备用默认值）。

JavaScript 修改：

// 在页面加载时立即执行
document.addEventListener("DOMContentLoaded", () => {
  const storedTheme = localStorage.getItem("color-mode");
  if (storedTheme) {
    document.documentElement.setAttribute("color-mode", storedTheme);
  } else {
    // 如果localStorage中没有，则使用HTML中定义的默认值
    // 或者可以强制设置为一个默认值，例如 'light'
    // document.documentElement.setAttribute("color-mode", "light");
    localStorage.setItem("color-mode", document.documentElement.getAttribute("color-mode") || "light");
  }
});

优化HTML： 为了让JavaScript完全控制主题，建议从 标签中移除硬编码的 color-mode 属性，或者将其设置为一个不影响初始视觉的空值，然后完全由JS来决定。

代码重构：优化主题切换逻辑

原始的JavaScript代码在主题切换逻辑上可以进一步优化，使其更简洁、易读。

原始主题切换代码：

const themeBtn = document.querySelectorAll(".theme-toggle-btn");

const toggle = function (e) {
  if (e.currentTarget.classList.contains("light-hidden")) {
    document.documentElement.setAttribute("color-mode", "light");
    localStorage.setItem("color-mode", "light");
    return;
  }
  document.documentElement.setAttribute("color-mode", "dark");
  localStorage.setItem("color-mode", "dark");
};

themeBtn.forEach((btn) => {
  btn.addEventListener("click", toggle);
});

优化后的主题切换逻辑

我们可以创建一个函数来统一处理主题的设置和保存，并通过一个按钮来切换当前主题。

改进后的JavaScript：

// 获取主题切换按钮
const themeToggleBtns = document.querySelectorAll(".theme-toggle-btn");
const htmlElement = document.documentElement;

/**
 * 根据指定模式设置主题并保存到localStorage
 * @param {string} mode - 主题模式 ('light' 或 'dark')
 */
function setTheme(mode) {
  htmlElement.setAttribute("color-mode", mode);
  localStorage.setItem("color-mode", mode);
}

/**
 * 切换主题模式
 */
function toggleTheme() {
  const currentMode = htmlElement.getAttribute("color-mode");
  const newMode = currentMode === "dark" ? "light" : "dark";
  setTheme(newMode);
}

// 1. 页面加载时初始化主题
document.addEventListener("DOMContentLoaded", () => {
  const storedTheme = localStorage.getItem("color-mode");
  if (storedTheme) {
    setTheme(storedTheme);
  } else {
    // 如果没有存储，则根据系统偏好或默认值设置
    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    setTheme(prefersDark ? 'dark' : 'light');
  }
});

// 2. 绑定主题切换事件
themeToggleBtns.forEach((btn) => {
  btn.addEventListener("click", toggleTheme); // 统一使用 toggleTheme 函数
});

// 3. 绑定表单提交事件，阻止默认刷新
const searchForm = document.getElementById("search");
const searchInput = document.getElementById("search-input"); // 确保ID唯一

searchForm.addEventListener("submit", function(event) {
  event.preventDefault();
  console.log("执行搜索:", searchInput.value);
  // 在此处添加实际的搜索逻辑
});

在这个优化版本中：

• setTheme(mode) 函数负责设置 上的 color-mode 属性并更新 localStorage。
• toggleTheme() 函数根据当前主题决定切换到哪种模式，并调用 setTheme。
• 页面加载时的初始化逻辑更健壮，考虑了 localStorage 不存在时的默认值以及系统偏好设置。
• 主题切换按钮的事件监听统一指向 toggleTheme，简化了逻辑。

完整重构后的JavaScript代码示例

结合以上所有改进，以下是完整的JavaScript代码，它解决了主题重置问题，实现了主题持久化，并优化了代码结构。

// 获取HTML根元素
const htmlElement = document.documentElement;

// 获取主题切换按钮
const themeToggleBtns = document.querySelectorAll(".theme-toggle-btn");

// 获取搜索表单和输入框
const searchForm = document.getElementById("search");
const searchInput = document.getElementById("search-input"); // 确保ID唯一，原HTML中input和form的ID重复

/**
 * 根据指定模式设置主题并保存到localStorage
 * @param {string} mode - 主题模式 ('light' 或 'dark')
 */
function setTheme(mode) {
  htmlElement.setAttribute("color-mode", mode);
  localStorage.setItem("color-mode", mode);
}

/**
 * 切换主题模式：从当前模式切换到另一种模式
 */
function toggleTheme() {
  const currentMode = htmlElement.getAttribute("color-mode");
  const newMode = currentMode === "dark" ? "light" : "dark";
  setTheme(newMode);
}

// === 事件监听和初始化 ===

// 1. 页面加载时初始化主题
document.addEventListener("DOMContentLoaded", () => {
  const storedTheme = localStorage.getItem("color-mode");
  if (storedTheme) {
    // 如果localStorage有存储，则应用该主题
    setTheme(storedTheme);
  } else {
    // 如果没有存储，则根据系统偏好设置主题，默认为'light'
    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    setTheme(prefersDark ? 'dark' : 'light');
  }
});

// 2. 绑定主题切换按钮的点击事件
themeToggleBtns.forEach((btn) => {
  btn.addEventListener("click", toggleTheme);
});

// 3. 绑定搜索表单的提交事件，阻止默认刷新行为
searchForm.addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单提交导致的页面刷新
  console.log("执行搜索:", searchInput.value);
  // 在这里添加实际的搜索逻辑，例如：
  // fetchGitHubUser(searchInput.value);
});

CSS 保持不变：

/* 你的CSS代码保持不变，因为它已经很好地处理了主题切换的样式 */
/* ... */

注意事项与最佳实践

1. HTML ID 唯一性： 确保HTML文档中所有 id 属性的值都是唯一的。在原代码中 和 存在冲突，这可能导致 document.getElementById 行为不确定。建议为输入框使用如 search-input 这样的唯一ID。
2. 用户体验： 页面加载时，如果 localStorage 中有主题偏好，应尽快应用，避免出现“闪烁”到默认主题再切换的现象。将主题初始化逻辑放在 DOMContentLoaded 事件监听器中，可以确保在DOM准备就绪后立即执行。
3. 无障碍性 (Accessibility)： aria-label 的使用是良好的实践，它为屏幕阅读器提供了额外的上下文信息。
4. CSS 变量： 利用CSS变量 (var(--variable-name)) 来管理颜色和字体等属性，使得主题切换变得非常高效和声明式，无需通过JavaScript直接操作样式。
5. 系统偏好： 结合 window.matchMedia('(prefers-color-scheme: dark)') 可以更好地适配用户的操作系统主题偏好，提供更智能的默认主题设置。