学习 React 中的本地存储：创建明暗主题切换器应用程序

本周的文章通过创建主题切换器应用程序来检查 React 本地存储。我们涵盖了基础知识，讨论了局限性，并演示了如何在 React 应用程序中实现这些概念！
介绍
在本文中，我们将通过创建一个简单的浅色/深色主题切换应用程序来学习如何在 React 中使用本地存储。虽然我们正在开发一个适合初学者的 React 应用程序，但在使用本地存储时还有很多值得探索的地方。

我们将首先看看如何在 JavaScript 中使用本地存储。然后，我们将了解在 React 中使用本地存储时需要哪些额外步骤，最后，我们将构建亮/暗主题切换应用程序！

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

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

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

setItem()：在本地存储中存储键值对。

getItem()：从本地存储中检索与键关联的值。

removeItem()：根据键从本地存储中删除键值对。

clear()：从本地存储中删除所有键值对。

key()：检索本地存储中指定索引处的键。

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

本地存储格式和限制
本地存储仅存储基于文本的数据。存储复杂的数据类型，需要使用JSON.stri