首页　>　文章列表　>　白天夜晚模式切换后刷新页面就失效了，如何解决？

白天夜晚模式切换后刷新页面就失效了，如何解决？

260 2025-04-12

白天/夜晚模式切换失效的解决方法

本文将解决白天/夜晚模式切换后刷新页面失效的问题。问题在于，模式设置没有持久化保存，刷新页面后丢失了之前的选择。以下提供一种改进方案，利用Cookie存储模式设置，并在页面加载时读取Cookie恢复模式。

问题描述:

一个白天/夜晚模式切换按钮，刷新页面后，选择的模式会丢失。

原代码存在的问题:

提供的代码使用setcookie()函数设置Cookie，但缺少在页面加载时读取Cookie并应用样式的关键步骤。 getreadmode()函数只在按钮图标上应用了模式，而没有将模式应用到标签上，导致样式变化只体现在图标上，刷新后丢失。另外，代码中存在一些错误，例如hasclass应该为hasClass，addclass应该为addClass，removeclass应该为removeClass。 JavaScript代码直接操作DOM，与PHP代码结合不够紧密。

改进后的代码:

为了更清晰地展示，我们将代码结构调整为更易于理解的方式，并使用更标准的JavaScript和PHP语法。

1. JavaScript (script.js):

function switchReadMode() {
  const body = document.body;
  const btn = document.querySelector('.btn-read-mode');
  const currentMode = body.classList.contains('night-mode') ? 'day' : 'night';
  const nextMode = currentMode === 'day' ? 'night' : 'day';
  const iconClass = nextMode === 'day' ? 'fa fa-sun-o' : 'fa fa-moon-o';

  body.classList.toggle('night-mode');
  btn.querySelector('i').className = iconClass;

  setCookie('read-mode', nextMode);
}

function setCookie(name, value) {
  const date = new Date();
  date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000)); // 30 days
  document.cookie = `${name}=${encodeURIComponent(value)}; expires=${date.toUTCString()}; path=/`;
}

document.addEventListener('DOMContentLoaded', () => {
  const btn = document.querySelector('.btn-read-mode');
  btn.addEventListener('click', (e) => {
    e.preventDefault();
    switchReadMode();
  });

  // 页面加载时恢复模式
  const mode = getCookie('read-mode');
  if (mode) {
    document.body.classList.add(mode === 'night' ? 'night-mode' : 'day-mode');
    const iconClass = mode === 'night' ? 'fa fa-moon-o' : 'fa fa-sun-o';
    btn.querySelector('i').className = iconClass;
  }
});

function getCookie(name) {
  const nameEQ = `${name}=`;
  const ca = document.cookie.split(';');
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
  }
  return null;
}

2. CSS (style.css): (需要根据你的具体样式调整)

.night-mode {
  background-color: #333;
  color: #fff;
}

3. HTML (index.html or relevant template):

<!DOCTYPE html>


  白天/夜晚模式

这个改进方案使用纯JavaScript来处理模式切换和Cookie操作，避免了PHP和JavaScript混合编程带来的复杂性，使代码更易于维护和理解。记住将script.js和style.css文件放在正确的目录下，并根据你的项目结构调整路径。图片的展示方式未在代码中体现，请根据你的实际情况添加。

白天夜晚模式切换后刷新页面就失效了，如何解决？