如何在 React 的本地存储中保存暗模式？

Question

我想在 local storage 中保存用户选择的主题 - 浅色或深色，以便在页面刷新时主题仍然与用户的选择一致。我尝试为此使用 useEffect 挂钩，但我可能做错了什么。我包含了以下代码：

function App() {
// Theme
    const [theme, setTheme] = useState('light');
    const checkTheme = () => theme === 'light' ? setTheme('dark') : setTheme('light') ;

// Amount of Portions
const [amountOfPortions , setAmountOfPortions] = useState(1);

const updateAmountOfPortions = (dataFromChild) => {
    setAmountOfPortions(dataFromChild);
};

return (
    <div className={`app wrapper app__bgc--${theme}`}>
        <Switch onChange={checkTheme} color="primary"/>
        <MainCard update={updateAmountOfPortions}/>
        <Recipe value={amountOfPortions}/>
    </div>
    
)};

Answer 1

您只是在设置状态，该状态将在组件刷新后丢失

您需要使用 localStorage 编写一个函数 api。类似于：

const setThemeInStorage = (theme) => {
   localStorage.setItem('theme', theme)
}

然后像这样称呼它

setThemeInStorage('light')

并像这样检索它：

const getThemeInStorage = () => {
   localStorage.getItem('theme') // returns 'light' in this case
}

如果你想运行立即执行此代码

const theme = getThemeInStorage() 那么theme就是localStorage

的值

Answer 2

最简单的方法是使用像 useLocalStorage 这样的自定义挂钩。如果你不想使用钩子，他们仍然有实现 localStorage writing/reading 部分的代码，并附有注释解释他们是如何做到的，这样你就可以用不同的方式做到这一点（虽然我想不出你为什么会这样）。

Answer 3

这个怎么样？

function persistItem(key: string, value: string) {
    localStorage.setItem(key, value)
    return value
}

function usePersistState(key: string, initialValue?: string) {
    const [state, setState] = useState(
        () => localStorage.getItem(key) || persistItem(key, initialValue)
    )
    const setStateAndPersist = useCallback(
        (newState: string) => {
            setState(newState)
            return persistItem(key, newState)
        },
        [key, setState]
    )
    return [state, setStateAndPersist]
}

在您的组件中，只需 const [theme, setTheme] = usePersistState("theme", "light")。如果在 localStorage.

中没有找到任何内容，这将默认为“light”

如何在 React 的本地存储中保存暗模式？

How to save darkMode in local storage in React?

local-storage

reactjs

react-hooks

use-effect

darkmode