javascript 页面刷新不会将className更改为localStorage值

z8dt9xmd 于 2023-03-06 发布在 Java

关注(0)|答案(2)|浏览(121)

我正在创建我的第一个react应用程序，我在亮暗模式上遇到了一些问题。当点击按钮切换LightDark函数时，它会将true或false状态保存到本地存储器中，并且工作正常。问题是当我刷新页面时，由于某种原因，当“chattiny_darkmode”为true时，图标总是回到太阳的原因，我无法弄清楚。提前感谢。

const LightDarkMode = () => {
    const [darkMode, setDarkMode] = useState(false);

    useEffect(() => {
        const data = localStorage.getItem("chattiny_darkmode");

        if (data !== null) {
            setDarkMode(localStorage.getItem("chattiny_darkmode"));
        }
    }, []);

    const toggleLightDark = () => {
        if (darkMode === true) {
            setDarkMode(false);
            localStorage.setItem("chattiny_darkmode", false);
        } else {
            setDarkMode(true);
            localStorage.setItem("chattiny_darkmode", true);
        }
    };

    return (
        <div className="light-dark-mode">
            <button onClick={toggleLightDark}>
                <FaSun className={darkMode === true ? "hidden" : ""} />
                <FaMoon className={darkMode === true ? "" : "hidden"} />
            </button>
        </div>
    );
};

例如，当页面刷新时，本地存储中的“chattiny_darkmode”键的值为true，但由于某种原因，符号是太阳而不是月亮。

JavaScript

来源：https://stackoverflow.com/questions/75645374/page-refresh-doesnt-change-the-classnames-to-the-localstorage-value

2条答案

按热度按时间

cbwuti441#

localStorage只存储字符串值，当你使用setItem("chattiny_darkmode", true)时，true被字符串化，所以你实际上存储的是"true"，当你检索这个值时，它仍然是一个字符串，并且"true" !== true，所以你得到的是day模式。
您可以使用例如JSON.parse(..)或简单地与"true"进行比较来将值转换回来。
顺便说一下，你可以考虑直接从localStorage初始化darkMode，而不是用useEffect更新它，这在这里是可以的，因为getItem(..)是同步的。

const LightDarkMode = () => {
    const [darkMode, setDarkMode] = useState(() =>
        localStorage.getItem("chattiny_darkmode") === "true"
    );

    const toggleLightDark = () => {
        if (darkMode === true) {
            setDarkMode(false);
            localStorage.setItem("chattiny_darkmode", "false");
        } else {
            setDarkMode(true);
            localStorage.setItem("chattiny_darkmode", "true");
        }
    };
    ...
};

赞(0）回复(0）举报 2023-03-06

fwzugrvs2#

首先，我将对state和localstorage数据结构使用相同的类型。
现在，setItem的语法如下

setItem(keyName, keyValue)

**参数 *

keyName* 包含要创建/更新的密钥名称的字符串。
keyValue* 一个字符串，包含您要为正在创建/更新的键指定的值。

所以，如果你用一个字符串替换你的false/true布尔值，那就可以了。
一些与问题无关的东西，我不认为在本地存储器中存储用户的暗/亮模式是最好的选择。如果用户使用其他设备访问您的网站，他们将需要重置暗/亮模式。

赞(0）回复(0）举报 2023-03-06

我来回答

javascript 页面刷新不会将className更改为localStorage值

2条答案

相关问题

热门标签

最新问答