Javascript 尽管使用了本地存储，但主题切换程序在刷新过程中不持久

为一个项目做一个主题切换器，如果不刷新它的话效果会很好。代码如下：

 const initialTheme = () => window.localStorage.getItem('theme') || true;
    const [lightTheme, setLightTheme] = useState(initialTheme);
    const { body } = document;

    useEffect(() => {
        window.localStorage.setItem('theme', lightTheme);

        lightTheme === true
            ? body.parentElement.dataset.theme = 'light'
            : body.parentElement.dataset.theme = 'dark'
    }, [lightTheme])

因此，当应用切换时，html标记上的数据主题被设置为亮或暗。 然而，当我刷新页面时，不管发生什么，页面都会返回到黑色主题。我在html标记上没有数据主题，我用上面的代码动态地完成了这项工作

奇怪的是，localStorage中的值总是正确的。当我将其设为浅主题时，localStorage值为true（应该是这样），而当设为暗主题时，localStorage值为false（再次更正）。此localStorage值通过刷新保持不变

---

如果可以，请帮忙&谢谢

当您从localStorage获取数据时，您将获得字符串值

“true”

或字符串值

“false”

。因此，lightTheme的值永远不会计算为

true

，并且您的代码始终呈现三元运算符的第二部分，即暗主题。尝试将

'light'

或

'dark'

保存在localStorage中，然后根据这些值进行切换。

初始化

lightTheme

时，您只是在

useState

中将函数体传递给函数。您必须调用该函数来计算值并像这样传入

useState

，

const[lightTheme，setLightTheme]=useState（initialTheme（））