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

Question

我正在尝试在ReactJS中构建一个darkmode。我试着在stackoverflow中查找其他答案，但没有一个os使用与我相同的方法。

我想做的事情：

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

我的方法是什么：

=>我创建了一个简单的一页假标题，其中几乎没有文本和标题。我加了一个"；开关"；按钮，单击时将在暗/亮模式之间切换。

=>我已经开始了我的"；状态"；带有布尔值，并将onClick按钮添加到我的"；"开关"；按钮每当我们点击按钮时，它都会调用一个名为handlechange((的函数，该函数会进一步更新"；状态"；使用"；this.setState"；并更改布尔值。

=>基于我们的布尔值；className"我们的div正在改变我在CSS中进一步定义的深色和浅色模式的渲染特定样式集。

工作原理：

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

问题是什么：

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

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

=>我已经设法将布尔值存储在本地存储中的变量名称"中；toggle"；并尝试console.log(切换(，它确实从false、true、false、true等更改，但当我从替换我的类名时

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

至

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

它根本不起作用，这意味着即使切换变量从true、false、true、false变化，按钮也不会对更改做出响应，并保持在灯光模式。。依此类推(当我尝试登录时(。

我应该采取什么方法来解决这个问题，这样我甚至可以将值存储在localstorage中，并将localstorage用于className？

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

我的代码：

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

像这样解析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 2

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

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

第二件事——最好在回调中执行副作用(如读取/写入localStorage(，而不是在渲染函数中：

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