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

Question

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

我正在尝试做的事情：

=>构建一个暗/亮模式 web 应用程序，所以当我单击按钮时，它会从暗模式切换到亮模式，再从暗模式切换到亮模式等等。

我的方法是什么：

=>我创建了一个简单的单页虚拟 header，其中包含少量文本和标题。 我添加了一个“切换”按钮，单击该按钮将在暗/亮模式之间切换。

=>我已经用 boolean 启动了我的“状态”，并将 onClick 按钮添加到我的“切换”按钮。 每当我们单击按钮时，它都会调用一个名为 handlechange() 的 function，它会使用“this.setState”进一步更新“状态”并更改我们的 boolean 值。

=>基于我们的 boolean 值，我们 div 的“className”正在发生变化，这会渲染特定的 styles 集，用于暗和亮模式，我在 CSS 中进一步定义。

什么工作：

=>按钮运行良好，我可以在模式之间切换。

问题是什么：

=>我正在尝试将 boolean 存储在浏览器的本地存储中。

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

=>我已经设法将 boolean 值存储在我的 localstorage 中的变量名“toggle”中，并尝试 console.log(toggle)，它确实从 false、true、false、true 等更改，但是当我替换我的 class 名称来自

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

至

<div className={toggle ? "dark-mode" : "light-mode"}> 

它根本不起作用，这意味着按钮不响应更改并保持亮模式，即使切换变量从 true、false、true、false.. 等等（当我尝试记录时）。

我应该如何解决这个问题，以便我什至可以将值存储在本地存储中并将本地存储用于类名？

感谢您耐心阅读。 请帮帮我:)

我的代码：

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;

Answer 1

首先 - localStorage 只能保存字符串值，因此您的标志将转换为'true'的'false' - 两者都是真实的。 您需要序列化/反序列化您的数据：

localStorage.setItem('app_data', JSON.stringify({ toggle }));
...
const { toggle } = JSON.parse(localStorage.getItem('app_data'));

第二件事 - 最好在回调中执行副作用（例如读/写 localStorage），而不是在渲染 function 中：

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

    localStorage.setItem('app_data', JSON.stringify({ toggle: !this.state.setClass }));
  };

componentDidMount() {
  const { toggle } = JSON.parse(localStorage.getItem('app_data'));

  this.setState({
    setClass: toggle
  });
}

Answer 2

像这样解析let toggle = JSON.parse(localStorage.getItem("Mode"));

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>
    );
  }
    }

Answer 3

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;