求助：网页暗黑模式刷新后无法保留，如何用localStorage实现？

要实现主题状态的本地记忆，需在切换主题时存储状态，同时在页面加载时读取并恢复状态，具体修改如下：

1. 改造主题切换函数，添加localStorage存储 #

修改toggleTheme函数，每次切换后将当前主题标识存入localStorage，确保刷新页面能读取到之前的选择：

function toggleTheme() {
    var theme = document.getElementsByTagName('link')[0];
    let currentTheme;
    if (theme.getAttribute('href') == 'stylesheet.css') {
        theme.setAttribute('href', 'testingstylesheet.css');
        currentTheme = 'dark';
    } else {
        theme.setAttribute('href', 'stylesheet.css');
        currentTheme = 'light';
    }
    // 将当前主题存入本地存储
    localStorage.setItem('selectedTheme', currentTheme);
}

2. 添加页面初始化逻辑，恢复主题和按钮状态 #

在页面加载完成后，读取localStorage中的主题设置，自动应用对应样式，并同步切换按钮的图标状态：

// 页面加载时执行初始化
window.addEventListener('DOMContentLoaded', function() {
    var themeLink = document.getElementsByTagName('link')[0];
    var toggleBtn = document.querySelector('.fa-toggle-off');
    // 获取本地存储的主题，默认使用亮色
    var savedTheme = localStorage.getItem('selectedTheme') || 'light';
    
    if (savedTheme === 'dark') {
        themeLink.setAttribute('href', 'testingstylesheet.css');
        // 切换按钮图标为开启状态
        toggleBtn.classList.add('fa-toggle-on');
    } else {
        themeLink.setAttribute('href', 'stylesheet.css');
        toggleBtn.classList.remove('fa-toggle-on');
    }
});

3. 修正按钮的class属性（原代码小问题） #

原按钮class里多了个多余的分号，需要去掉：

<i style="margin: 5px;position:fixed" onclick="myFunction(this);toggleTheme();toggleImage();" class="fa-solid fa-toggle-off fa-3x"></i>

完整修改后的代码 #

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
      function toggleTheme() {
          var theme = document.getElementsByTagName('link')[0];
          let currentTheme;
          if (theme.getAttribute('href') == 'stylesheet.css') {
              theme.setAttribute('href', 'testingstylesheet.css');
              currentTheme = 'dark';
          } else {
              theme.setAttribute('href', 'stylesheet.css');
              currentTheme = 'light';
          }
          localStorage.setItem('selectedTheme', currentTheme);
      }

      // 页面初始化恢复主题
      window.addEventListener('DOMContentLoaded', function() {
          var themeLink = document.getElementsByTagName('link')[0];
          var toggleBtn = document.querySelector('.fa-toggle-off');
          var savedTheme = localStorage.getItem('selectedTheme') || 'light';
          
          if (savedTheme === 'dark') {
              themeLink.setAttribute('href', 'testingstylesheet.css');
              toggleBtn.classList.add('fa-toggle-on');
          } else {
              themeLink.setAttribute('href', 'stylesheet.css');
              toggleBtn.classList.remove('fa-toggle-on');
          }
      });
</script>
</head>
<body>
<font size=6.5><i style="margin: 5px;position:fixed" onclick="myFunction(this);toggleTheme();toggleImage();" class="fa-solid fa-toggle-off fa-3x"></i></font>
<script>
      function myFunction(x) {
        x.classList.toggle("fa-toggle-on");
      }
   </script>
</body>

关键说明 #

• localStorage.getItem('selectedTheme')：读取本地存储的主题选择，若没有存储记录则默认使用亮色主题
• window.addEventListener('DOMContentLoaded')：确保DOM完全加载后再执行初始化逻辑，避免出现找不到元素的错误
• 同步按钮状态：初始化时根据存储的主题修改按钮的class，保证图标显示和当前主题一致

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