用 React 本地存储实现明暗主题切换器：黑夜与白天的轮回

## 本地存储的介绍

在踏上我们探索之旅之前，让我们先停下来了解一下本地存储。本地存储是一种在浏览器中持久化数据的 JavaScript API。它是一种键值存储，这意味着您可以将数据存储为键值对，然后在需要时检索它们。即使在关闭浏览器并重新打开后，这些数据也会保留在浏览器中，使其成为存储用户偏好或其他需要在会话之间保持的数据的理想选择。

## 在 React 中使用本地存储

现在，我们已经了解了本地存储是什么以及它能做什么，让我们看看如何在 React 中使用它。我们将通过创建一个简单的明暗主题切换器应用程序来做到这一点。

第一步是安装必要的依赖项。打开您的终端或命令行窗口，导航到您的 React 项目目录，然后运行以下命令：

npm install --save react-localstorage

这将安装 React Localstorage 库，这是一个与 React 一起使用的本地存储库。

安装完成后，我们需要创建一个新的组件来处理主题切换逻辑。为此，创建一个名为 `ThemeToggler.js` 的新文件，并在其中添加以下代码：

import React, { useState } from 'react';
import { useLocalStorage } from 'react-localstorage';

const ThemeToggler = () => {
const [isDarkMode, setIsDarkMode] = useLocalStorage('isDarkMode', false);

const toggleTheme = () => {
setIsDarkMode(!isDarkMode);
};

return (

);
};

export default ThemeToggler;

让我们分解一下这段代码。首先，我们导入了必要的库，包括 React 和 React Localstorage。然后，我们创建了一个名为 `ThemeToggler` 的组件，它将处理主题切换逻辑。

在组件内部，我们使用 `useLocalStorage` 钩子来管理 `isDarkMode` 状态。此钩子将我们的 `isDarkMode` 状态与本地存储中的 `isDarkMode` 键相关联，这意味着每当 `isDarkMode` 状态更新时，它也会更新本地存储中的值。

接下来，我们创建了一个 `toggleTheme` 函数，该函数在点击主题切换按钮时被调用。此函数简单地切换 `isDarkMode` 状态，从而在明暗模式之间切换。

最后，我们返回一个按钮，该按钮在单击时调用 `toggleTheme` 函数。

要使用我们的新组件，我们需要将其导入我们的应用程序并将其渲染到 DOM 中。在您的 `App.js` 文件中，添加以下代码：

import ThemeToggler from './ThemeToggler';

const App = () => {
return (

);
};

export default App;

现在，当您运行应用程序时，您应该会看到一个按钮，您可以单击它来切换应用程序的主题。

## 结语

通过这个简单的例子，我们探索了 React 中的本地存储，并了解了如何使用它来为您的 Web 应用程序添加用户偏好功能。现在，您可以使用这些知识来创建更强大和个性化的应用程序。