Javascript 如何使用状态实现暗模式并将设置保存到本地存储？

我正在尝试在ReactJS中构建一个暗模式。我尝试在stackoverflow中查找其他答案，但没有一个操作系统使用与我使用的方法相同的方法

我想做的是： =>构建一个黑暗/光明模式的web应用程序，所以当我点击按钮时，它会从黑暗模式切换到光明模式，从黑暗模式切换到光明模式，以此类推

我的做法是： =>我创建了一个简单的单页虚拟标题，其中包含少量文本和标题。我添加了一个“开关”按钮，当点击时，它将在黑暗/光明模式之间切换

=>我已经用布尔值启动了我的“状态”，并在“切换”按钮中添加了onClick按钮。无论何时单击该按钮，它都会调用一个名为handlechange（）的函数，该函数使用“this.setState”进一步更新“state”，并更改布尔值

=>基于我们的布尔值，div的“类名”正在更改，这将为暗模式和亮模式呈现特定的样式集，我在CSS中进一步定义了暗模式和亮模式

工作原理： =>按钮工作正常，我可以在模式之间切换

问题是： =>我正在尝试将布尔值存储在浏览器的本地存储中

=>原因是，即使用户刷新页面，他们也会保持以前选择的模式

=>我已设法将布尔值存储在本地存储中的变量名“toggle”中，并尝试console.log（toggle），它会从false、true、false、true等更改，但当我从

<div className={this.state.setClass ? "dark-mode" : "light-mode"}>

到

它根本不起作用，意味着按钮不响应更改并保持在灯光模式，即使切换变量从真、假、真、假更改。。等等（当我尝试登录时）

我应该采取什么方法来解决这个问题，这样我甚至可以将值存储在localstorage中，并使用localstorage作为类名

感谢您耐心阅读。 请帮帮我：）

我的代码：

import React from "react";
import ReactDOM from "react-dom";
import "./DarkMode.scss";

class DarkMode extends React.Component {
  state = {
    setClass: false
  };

  handleChange = () => {
    this.setState({
      setClass: !this.state.setClass
    });
    
  };

  render() {
    localStorage.setItem("Mode", !this.state.setClass);
    let toggle = localStorage.getItem("Mode");
    console.log(toggle);
    return (
      <div className={this.state.setClass ? "dark-mode" : "light-mode"}>
        <nav>Toggle goes Here</nav>
        <main>
          <h1>Light Mode</h1>
          <h2>Toggle the switch to see some magic happen!</h2>
          <button onClick={this.handleChange}>Switch</button>
        </main>
      </div>
    );
  }
}

export default DarkMode;

从“React”导入React；
从“react dom”导入react dom；
导入“/DarkMode.scss”；
类DarkMode扩展了React.Component{
状态={
setClass:false
};
handleChange=（）=>{
这是我的国家({
setClass:！this.state.setClass
});
};
render（）{
localStorage.setItem（“Mode”，！this.state.setClass）；
让toggle=localStorage.getItem（“模式”）；
console.log（切换）；
返回(
开关在这里
光模式
拨动开关，看看有什么神奇的事情发生！
转换
);
}
}
导出默认暗模式；

首先-localStorage只能保存字符串值，因此您的标志将被转换为

'false'

的

'true'

-两者都是真实的。您需要序列化/反序列化数据：

localStorage.setItem（'app_data'，JSON.stringify（{toggle}））；
...
const{toggle}=JSON.parse（localStorage.getItem（'app_data'）；

第二件事-最好在回调中执行副作用（例如读取/写入本地存储），而不是在渲染函数中：

handleChange=（）=>{
这是我的国家({
setClass:！this.state.setClass
});
localStorage.setItem（'app_data'，JSON.stringify（{toggle:！this.state.setClass}））；
};
componentDidMount（）{
const{toggle}=JSON.parse（localStorage.getItem（'app_data'）；
这是我的国家({
setClass:切换
});
}
像这样解析
let toggle=JSON.parse（localStorage.getItem（“Mode”）

类DarkMode扩展React.Component{
状态={
setClass:JSON.parse（localStorage.getItem（“模式”））
};
handleChange=（）=>{
if（JSON.parse（localStorage.getItem（“Mode”））==true）
this.setState（{setClass:false}，（）=>{
setItem（“Mode”，JSON.stringify（false））；
});
否则{
this.setState（{setClass:true}，（）=>{
setItem（“Mode”，JSON.stringify（true））；
});
}
};
render（）{
const{setClass}=this.state；
返回(
开关在这里
光模式
拨动开关，看看有什么神奇的事情发生！
转换
);
}
}
从“React”导入React；
导入“/DarkMode.scss”；
类DarkMode扩展了React.Component{
此.state={
黑暗模式：正确
};
componentDidMount（）{
if（localStorage.darkMode）{
this.setState（{…this.state，darkMode:localStorage.darkMode}）
}
}
handleChange=（）=>{
this.setState（{…this.state，mode:！this.state.mode}）；
localStorage.darkMode=this.state.darkMode；
};
render（）{
返回(
开关在这里
光模式
拨动开关，看看有什么神奇的事情发生！
转换
);
}
}
导出默认暗模式；
您不需要将类设置为状态，只需设置“Mode”，这样当您的组件装载时，您就可以在localStorage const default Mode='day'中检查模式
if（localStorage.mode&&localStorage.mode！==“”）{this.setState（{…this.state，mode:localStorage.mode}}}
else设置默认模式您介意一些代码作为参考吗？这真的很有帮助。您可以编辑我的上述代码和edit@AbhinavAnshul现在检查此项，并按预期工作。如果您需要任何帮助，请告诉我。我刚刚添加了代码，因为您将只在localStorage中存储一个字符串或布尔值。您只需执行
localStorage.item=true
或您的值即可。在将其设置为您的状态之前，您还需要检查localStorage中的模式。由于你的类存储在css文件中，你不需要在类中携带它。出于某种原因，即使在解析之后，我也可以在模式之间切换，但当我刷新时，它是al
import React from "react";
import ReactDOM from "react-dom";
import "./DarkMode.scss";

class DarkMode extends React.Component {
  state = {
    setClass: false
  };

  handleChange = () => {
    this.setState({
      setClass: !this.state.setClass
    });
    
  };

  render() {
    localStorage.setItem("Mode", !this.state.setClass);
    let toggle = localStorage.getItem("Mode");
    console.log(toggle);
    return (
      <div className={this.state.setClass ? "dark-mode" : "light-mode"}>
        <nav>Toggle goes Here</nav>
        <main>
          <h1>Light Mode</h1>
          <h2>Toggle the switch to see some magic happen!</h2>
          <button onClick={this.handleChange}>Switch</button>
        </main>
      </div>
    );
  }
}

export default DarkMode;

class DarkMode extends React.Component {
 state = {
    setClass: JSON.parse(localStorage.getItem("Mode"))
  };

  handleChange = () => {

    if (JSON.parse(localStorage.getItem("Mode")) === true)
      this.setState({ setClass: false }, () => {
        localStorage.setItem("Mode", JSON.stringify(false));
      });
    else {
      this.setState({ setClass: true }, () => {
        localStorage.setItem("Mode", JSON.stringify(true));
      });
    }
  };

  render() {
    const { setClass } = this.state;
    return (
      <div className={setClass ? "dark-mode" : "light-mode"}>
        <nav>Toggle goes Here</nav>
        <main>
          <h1>Light Mode</h1>
          <h2>Toggle the switch to see some magic happen!</h2>
          <button onClick={this.handleChange}>Switch</button>
        </main>
      </div>
    );
  }
    }

import React from "react";
import "./DarkMode.scss";

class DarkMode extends React.Component {
  this.state = {
    darkMode: true
  };

componentDidMount() {
  if(localStorage.darkMode) {
    this.setState({...this.state, darkMode: localStorage.darkMode}) 
  }
}

handleChange = () => {
  this.setState({ ...this.state, mode: !this.state.mode });
  localStorage.darkMode = this.state.darkMode;
 };

  render() {
    return (
      <div className={this.state.darkMode ? "dark-mode" : "light-mode"}>
        <nav>Toggle goes Here</nav>
        <main>
          <h1>Light Mode</h1>
          <h2>Toggle the switch to see some magic happen!</h2>
          <button onClick={this.handleChange}>Switch</button>
        </main>
      </div>
    );
  }
}

export default DarkMode;