请查看我的代码 toggle 按钮工作正常，但我也想将 toggle 状态保存到 localStorage 我之前已经尝试过很多次，尤其是使用 Vanilla JS 但我对
这里也是回购：https://github.com/AbidAlWassie/React-Portfolio-main
这是完全部署的站点：https://abidalwassie.github.io/React-Portfolio-main/
import React from 'react'
import { useState, useEffect } from 'react'
import { MdOutlineDarkMode } from 'react-icons/md'
const Navbar = () => {
const [scheme, setScheme] = useState(false);
const [toggle, setToggle] = useState(false);
useEffect(() => {
document.body.classList.toggle('light', scheme);
}, [scheme]);
useEffect(() => {
const navbar = document.getElementById("navbar");
navbar.classList.toggle("open", toggle);
}, [toggle]);
return (
<nav className='navbar' id='navbar'>
<div className="container flex justify-between items-center mx-auto text-center">
<div className='my-logo'>
<div className='circle'><span className="firstLetter">A</span><div className="half-circle"></div></div>
<span className="otherLetters" draggable="false">bid</span>
</div>
<div className="nav-holder">
<ul className='nav-list'>
{[
'home',
'about',
'skills',
'services',
'work',
'contact'
].map((item) => (
<li className='nav-link' key={`link-${item}`}>
<a href={`#${item}`} draggable="false"> {item}</a>
</li>
))}
</ul>
</div>
<button className='toggleBtn' id='toggleBtn' onClick={()=> setScheme(!scheme) }>
<MdOutlineDarkMode/>
</button>
<div className='menuBtn hamburger' onClick={()=> setToggle(!toggle) }>
<div className="bar"></div>
<div className="bar"></div>
<div className="bar"></div>
</div>
</div>
</nav>
)
}
export default Navbar回答1
您必须在 localStorage 的 useState 中设置方案 value 以便下次初始化，在顶部添加以下代码，
const localTheme = JSON.parse(localStorage.getItem('key_name')) || false;
const [scheme, setScheme] = useState(localTheme);并且需要 store on useEffect in localStorage
useEffect(() => {
document.body.classList.toggle('light', scheme);
localStorage.setItem('key_name',scheme);
}, [scheme]);