如何在React中为已实现的深色模式添加Local Storage持久化

要实现页面刷新后深色模式状态不丢失，需将模式状态同步到localStorage，同时在组件初始化时读取保存的状态并应用。以下是具体实现：

实现步骤 #

• 引入React的useState和useEffect钩子管理状态与副作用
• 从localStorage读取已保存的模式，作为状态初始值
• 组件挂载时，根据初始状态给根元素添加/移除dark类
• 修改切换函数，在操作DOM类名的同时，更新状态和localStorage

修改后的完整代码 #

import { useState, useEffect } from 'react';
import Image from 'next/image'; // 若未使用Next.js，可替换为原生img标签

function Theme() {
  // 从localStorage读取初始模式，默认非深色模式
  const [isDarkMode, setIsDarkMode] = useState(() => {
    return localStorage.getItem('mode') === 'dark';
  });

  useEffect(() => {
    // 状态变化时同步更新根元素类名
    if (isDarkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [isDarkMode]);

  const toggleMode = () => {
    setIsDarkMode(prevMode => {
      const newMode = !prevMode;
      // 同步更新localStorage
      localStorage.setItem('mode', newMode ? 'dark' : 'light');
      // 更新DOM类名
      document.documentElement.classList.toggle('dark', newMode);
      return newMode;
    });
  };

  return (
    <div className="theme_toggle">
      {/* 根据当前模式标识按钮状态 */}
      <div 
        className={`day_mode flex items-center ${isDarkMode ? 'active' : ''}`} 
        onClick={toggleMode}
      >
        <Image src="/dark.svg" width="20" height="20" alt="切换到深色模式" />
      </div>
      <div 
        className={`night_mode flex items-center ${!isDarkMode ? 'active' : ''}`} 
        onClick={toggleMode}
      >
        <Image src="/day_white.svg" width="20" height="20" alt="切换到浅色模式" />
      </div>
    </div>
  )
}

export default Theme

关键说明 #

• 用useState的函数式初始化，避免每次渲染重复读取localStorage
• useEffect监听状态变化，确保DOM类名与状态始终同步
• 切换函数中使用函数式更新状态，保证基于最新状态修改
• 模式状态存入localStorage，刷新页面后可直接读取恢复设置

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