函数调用异常及页面刷新主题切换不生效求助（LocalStorage存取值正常）

嘿，我来帮你解决这两个头疼的问题，咱们一步步来：

1. 核心坑：localStorage存布尔值的类型陷阱 #

这是主题切换不生效的关键！你可能不知道，localStorage 只能存字符串，当你把布尔值 true/false 存进去时，它会自动变成 "true"/"false" 字符串。而你在 load() 里直接拿字符串和布尔值比，逻辑全乱了：

• 比如你存的是 false，取出来是字符串 "false"，这时候 "false" == false 的结果是 false（因为字符串"false"属于真值），代码就会错误地调用 DefaultTheme()，而不是你想要的深色主题。

修复方式很简单： #

读取的时候把字符串转成布尔值就行，或者直接用字符串做判断：

function load() {
  // 把取到的字符串转成布尔值：只有"true"才会变成true，其他都是false
  const savedThemeStr = window.localStorage.getItem("saveTheme");
  isDefault = savedThemeStr === "true";

  console.log("当前主题状态: " + isDefault);
  // 用!isDefault代替==false，不管是字符串还是布尔都能正确判断
  if(!isDefault) {
    DarkTheme();
  } else {
    DefaultTheme();
  }
}

2. 函数调用逻辑的小优化 #

你的按钮点击逻辑其实没问题，但可以写得更简洁，避免初始值混淆：

• 现在你是先判断isDefault再调用对应函数，不如直接取反状态，逻辑更清晰：

button.onclick = function() {
  isDefault = !isDefault; // 直接翻转当前状态
  isDefault ? DefaultTheme() : DarkTheme();
}

另外，存值的时候可以显式把布尔值转成字符串，代码可读性更好：

// 在DefaultTheme和DarkTheme里改成这样
window.localStorage.setItem("saveTheme", isDefault.toString());

完整修复后的代码 #

var link = document.getElementById("color-mode");
var button = document.getElementById("theme-button");
var searchButton = document.getElementById("search-button");
var userSettings = document.getElementById("user-settings");
var siteLogo = document.getElementById("site-logo");
var isDefault = false;

button.onclick = function() {
  isDefault = !isDefault;
  isDefault ? DefaultTheme() : DarkTheme();
}

function DefaultTheme() {
  link.href = "../static/CSS/default.css";
  isDefault = true;
  searchButton.src = "../static/Media/SearchIconDefault.png";
  userSettings.src = "../static/Media/UserIconDefault.png";
  siteLogo.src = "../static/Media/LogoDefault.png";
  window.localStorage.setItem("saveTheme", isDefault.toString());
}

function DarkTheme() {
  link.href = "../static/CSS/dark.css";
  isDefault = false;
  searchButton.src = "../static/Media/SearchIconDark.png";
  userSettings.src = "../static/Media/UserIconDark.png";
  siteLogo.src = "../static/Media/LogoDark.png";
  window.localStorage.setItem("saveTheme", isDefault.toString());
}

function load() {
  const savedThemeStr = window.localStorage.getItem("saveTheme");
  // 如果localStorage没值，默认用深色主题（false），你也可以改成true用默认主题
  isDefault = savedThemeStr ? savedThemeStr === "true" : false;
  console.log("当前主题状态: " + isDefault);
  isDefault ? DefaultTheme() : DarkTheme();
}

load();

额外检查点 #

• 先确认你的CSS和图片路径是不是对的！路径错了的话，就算逻辑对了，主题也不会切换；
• 可以在控制台打印 link.href、searchButton.src 这些值，看看资源有没有正确加载；
• 如果页面加载时主题闪一下，可以把 load() 放在DOM加载完成后执行，比如加个 document.addEventListener('DOMContentLoaded', load); 代替直接调用 load()。

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