本周的文章通过创建主题切换器应用程序来研究React本地存储。我们介绍基础知识，讨论局限性，并演示如何在React应用中实现这些概念！

介绍

在本文中，我们将学习如何通过创建一个简单的轻/深色主题切换应用程序与React中的本地存储一起工作。尽管我们正在开发一个对初学者友好的React应用程序，但是在使用值得探索的本地存储时，还有更多的发现。

我们将首先看一下如何与JavaScript中的本地存储一起工作。然后，我们将在React中使用本地存储时需要了解需要采取哪些其他步骤，最后，我们将构建Light/Dark Theme Toggle App！

注意： 我们将专注于学习反应代码，而不是CSS。但是，请随意克隆项目或复制CSS代码。

什么是本地存储？

本地存储是一种Web存储API，可让您将键值对存储在Web浏览器中。这是一个持久的存储选项，这意味着即使关闭并重新打开数据，数据仍保留在浏览器中。本地存储对于记住用户首选项或在Web应用程序中保存信息很有用。您可以使用JavaScript存储，检索或从本地存储中删除数据。

在JavaScript中使用本地存储时，我们有以下方法：

• setItem（）：在本地存储中存储一个键值对。

• getItem（）：检索与本地存储的键相关的值。

• removeItem（）：根据钥匙从本地存储中删除键值对。

• clear（）：从本地存储中删除所有键值对。

• key（）：在本地存储中指定索引中检索键。

此外，我们可以使用localStorage.length来找出本地存储的项目的总数。

本地存储格式和限制

本地存储仅存储基于文本的数据。要存储复杂的数据类型，您需要使用JSON.stringify()将其转换为文本格式，但是方法或功能将丢失！

要回收并转换存储的数据，您可以使用JSON.parse()，但请记住手动重新触及方法或功能，因为它们不会自动恢复。使用JSON.stringify()和JSON.parse()与本地存储时，请注意这些限制。

此外，本地存储具有数据限制，该数据限制通常约为每个域5-10 MB，具体取决于浏览器。

注意： 存储在本地存储中的数据没有加密，并且可以访问浏览器的任何人都可以轻松阅读。以这种方式存储敏感信息可能会带来风险。

会话和本地存储

使用存储时，您有两个选项，会话和本地。

主要区别在于，浏览器关闭时会删除会话存储数据，而即使关闭浏览器并重新打开浏览器后，本地存储数据仍持续。

由于我们正在创建一个主题选择器，因此我们将使用本地存储选项，以便用户选择的主题保持持久。

使用React中的本地存储

要与React中的本地存储一起工作，我们需要使用以下钩子：

• usestate

• 使用效果

我们使用 usestate 挂钩来保存主题的状态，该状态具有光或黑暗的价值。

我们使用使用效果挂钩访问本地存储并每次用户切换主题值时运行get主题功能。

注意： 由于我们的重点是学习本地存储，因此我们将保持对初学者的友好型，而不是创建单独的组件。

构建轻/暗主题切换应用

现在是时候构建光/深色主题切换React应用了！即使这是一个简单的应用程序，代码很少，但学习和遵循最佳编码实践符合我们的最大利益。

遵守最佳的编码结构实践

以促进可读性，可维护性和有效执行的顺序构建此应用程序，我们将按照此顺序进行编码：

1. 用useState钩定义状态变量。

2. 定义任何辅助功能，例如用于与本地存储交互的功能。

3. 定义事件处理程序，例如toggleTheme。

4. 使用useEffect钩进行副作用，例如从组件安装上的本地存储中检索数据。

5. 渲染组件，包括任何事件听众和基于状态变量的条件渲染逻辑。

此功能顺序遵循清晰逻辑的React应用程序结构的最佳实践。它始于定义状态变量，然后是辅助功能和事件处理程序。接下来是使用效果挂钩，因为它取决于这些功能和组件的生命周期。最后，渲染组件可确保有效使用状态变量，功能和事件处理程序进行所需的输出。该顺序提高了可读性，可维护性和效率。

进口

在应用程序JSX文件的顶部，我们会从React导入USESTATE和使用效果。我们还导入应用CSS文件。

import { useState, useEffect } from "react";
import "./App.css";

应用功能

现在，我们创建了一个应用程序函数，该函数保存我们要创建的所有代码，并导出它。

function App() {
    // All of the code goes here    
}

export default App;

Usestate钩子

我们使用 usestate 挂钩来设置并保存主题变量值， light 或 dark 。在下文中，const [theme, setTheme] = useState("light")，值“ light ”的值保存到 const “ 主题”。 settheme 是一个函数，使我们能够更改主题变量的价值。

另外，我们可以编写一个匿名函数，而不是将值设置为“ Light ”，该功能检查是否存储在本地存储中的主题值。

在匿名函数中，我们创建一个名为 initialtheme 的变量，并将其设置为localStorage.getItem("theme")。该代码将在本地存储中检索“ 主题”变量（如果有一个）的值，或者如果没有一个，则将返回 null 。

使用三元操作员，我们返回 jirtialtheme 或“ light ”的值作为初始theme 值。

    const [theme, setTheme] = useState(() => {
        const initialTheme = localStorage.getItem("theme");
        return initialTheme ? initialTheme : "light";
    });

获取主题功能

getThemefromlocalstorage 函数使用localStorage.getItem("theme")从本地存储中检索主题变量的值，并将其设置为 savedtheme 变量。

如果在本地存储中没有主题变量的值，则将返回零。如果在本地存储中有主题的值在if语句中，我们使用 setTheme 函数来更改状态变量 theme 对于保存的主题的当前值。

    function getThemeFromLocalStorage() {
        const savedTheme = localStorage.getItem("theme");
        if (savedTheme) {
            setTheme(savedTheme);
        }
    }

切换主题功能

使用 setTheme 函数，我们通过检查 theme>变量的当前值，通过检查 prevtheme 状态值。

    function toggleTheme() {
        setTheme((prevTheme) => {
            const newTheme = prevTheme === "light" ? "dark" : "light";
            localStorage.setItem("theme", newTheme);
            return newTheme;
        });
    }

    useEffect(() => {
        getThemeFromLocalStorage();
    }, [theme]);

    return (
        <div className={`ctn ${theme}`}>
            <div className={`app ${theme}`}>
                <h1>Current theme: {theme}</h1>
                <button onClick={toggleTheme}>Toggle Theme</button>
            </div>
        </div>
    );

import { useState, useEffect } from "react";
import "./App.css";

function App() {
    const [theme, setTheme] = useState(() => {
        const initialTheme = localStorage.getItem("theme");
        return initialTheme ? initialTheme : "light";
    });

    function getThemeFromLocalStorage() {
        const savedTheme = localStorage.getItem("theme");
        if (savedTheme) {
            setTheme(savedTheme);
        }
    }

    function toggleTheme() {
        setTheme((prevTheme) => {
            const newTheme = prevTheme === "light" ? "dark" : "light";
            localStorage.setItem("theme", newTheme);
            return newTheme;
        });
    }

    useEffect(() => {
        getThemeFromLocalStorage();
    }, [theme]);

    return (
        <div className={`ctn ${theme}`}>
            <div className={`app ${theme}`}>
                <h1>Current theme: {theme}</h1>
                <button onClick={toggleTheme}>Toggle Theme</button>
            </div>
        </div>
    );
}

export default App;