什么是本地存储？
本地存储是一种网络存储 API，允许您在网络浏览器中存储键值对。它是一个持久存储选项，这意味着即使在浏览器关闭并重新打开后，数据仍保留在浏览器中。本地存储对于记住用户首选项或在 Web 应用程序中保存信息很有用。您可以使用 JavaScript 在本地存储中存储、检索或删除数据。
在 JavaScript 中使用本地存储时，我们有以下方法：
- setItem() ：在本地存储中存储键值对。
- getItem() ：从本地存储中检索与键关联的值。
- removeItem() ：根据键从本地存储中删除键值对。
- clear() ：从本地存储中删除所有键值对。
- key() ：检索本地存储中指定索引处的键。
此外，我们可以用来localStorage.length找出本地存储项目的总数。
本地存储格式和限制
本地存储仅存储基于文本的数据。存储复杂的数据类型，需要使用JSON.stringify()将它们转换成文本格式，但是方法或函数会丢失！
要检索和转换存储的数据，您可以使用JSON.parse()，但请记住手动重新附加方法或函数，因为它们不会自动恢复。JSON.stringify()使用本地存储时请注意这些限制JSON.parse()。
此外，本地存储有数据限制，通常每个域大约 5-10 MB，具体取决于浏览器。
**注意： ** 存储在本地存储中的数据未加密，任何有权访问浏览器的人都可以轻松读取。以这种方式存储敏感信息可能会带来风险。
会话和本地存储
使用存储时，您有两个选项，会话和本地。
主要区别在于会话存储数据会在浏览器关闭时被删除，而本地存储数据即使在浏览器关闭并重新打开后仍然保持不变。
由于我们正在创建主题选择器，因此我们将使用本地存储选项，以便用户选择的主题将保持不变。
在 React 中使用本地存储
要在 React 中使用本地存储，我们需要使用以下钩子：
- 使用状态
- 使用效果
我们使用useState钩子来保存主题的状态，其值为 light 或 dark。
我们使用useEffect挂钩访问本地存储并在每次用户切换主题值时运行获取主题函数。
**注意： ** 由于我们的重点是学习本地存储，因此我们将保持这个项目对初学者友好，而不创建单独的组件。
构建浅色/深色主题切换应用程序
现在是构建浅色/深色主题切换 React 应用程序的时候了！尽管它是一个代码很少的简单应用程序，但学习和遵循最佳编码实践符合我们的最大利益。
坚持最佳编码结构实践
为了以提高可读性、可维护性和高效执行的顺序构建此应用程序，我们将按以下顺序编写代码：
- 用钩子定义状态变量
useState。 - 定义任何辅助函数，例如用于与本地存储交互的函数。
- 定义事件处理程序，例如
toggleTheme. - 使用
useEffect钩子来处理副作用，例如在组件挂载时从本地存储中检索数据。 - 渲染组件，包括任何事件侦听器和基于状态变量的条件渲染逻辑。
此函数顺序遵循清晰且合乎逻辑的 React 应用程序结构的最佳实践。它从定义状态变量开始，然后是辅助函数和事件处理程序。接下来是 useEffect 挂钩，因为它取决于这些函数和组件的生命周期。最后，呈现组件可确保有效使用状态变量、函数和事件处理程序以获得所需的输出。此顺序增强了可读性、可维护性和效率。
入口
在 App jsx 文件的顶部，我们从 React 导入 useState 和 useEffect 钩子。我们还导入 App CSS 文件。
import { useState, useEffect } from "react";
import "./App.css";
应用功能
我们现在创建一个 App 函数，其中包含我们将要创建的所有代码，并将其导出。
function App() {
// All of the code goes here
}
export default App;
使用状态挂钩
我们使用useState钩子来设置和保存主题变量值，light或dark。在下文中const [theme, setTheme] = useState("light")，值“ light ”被保存到常量“ theme ”中。setTheme是一个使我们能够更改 主题变量值的函数。
或者，我们可以编写一个匿名函数来检查本地存储中是否存储了预先存在的主题值，而不是将值设置为“ light ”。
在匿名函数中，我们创建一个名为initialTheme的变量并将其设置为等于localStorage.getItem("theme")。如果有，这段代码将在本地存储中检索“ theme ”变量的值，否则返回NULL 。
使用三元运算符，我们返回 initialTheme或“ light ”的值作为initialTheme值。
const [theme, setTheme] = useState(() => {
const initialTheme = localStorage.getItem("theme");
return initialTheme ? initialTheme : "light";
});
获取主题函数
getThemeFromLocalStorage函数用于从本地存储中localStorage.getItem("theme")检索主题变量的值并将其设置为savedTheme变量。
如果本地存储中没有主题变量的值，则返回 NULL。如果本地存储中有主题变量的值，则在 if 语句中，我们使用setTheme函数将状态变量主题更改为已保存主题的当前值。
function getThemeFromLocalStorage() {
const savedTheme = localStorage.getItem("theme");
if (savedTheme) {
setTheme(savedTheme);
}
}
切换主题功能
使用setTheme函数，我们通过检查 prevTheme状态值来检查主题变量的当前值。****
我们创建变量newTheme并使用三元运算符为其分配与当前主题相反的值。
最后，我们利用localStorage.setItem("theme", newTheme)分配newTheme值并随后返回newTheme值。
function toggleTheme() {
setTheme((prevTheme) => {
const newTheme = prevTheme === "light" ? "dark" : "light";
localStorage.setItem("theme", newTheme);
return newTheme;
});
}
使用Effect函数
我们创建一个useEffect挂钩，以便在每次主题变量更改时运行getThemeFromLocalStorage() 函数。我们通过将主题变量设置为 useEffect 的依赖项数组中的依赖项来实现此目的。********
useEffect(() => {
getThemeFromLocalStorage();
}, [theme]);
渲染组件
<div>最后，我们返回一个带有使用当前主题变量分配的类名的HTML ，以及一个<h1>也包含当前主题变量的标签。
我们还合并了一个按钮，允许用户通过使用onClick事件侦听器来切换主题，该事件侦听器在被单击时执行toggleTheme函数。
return (
<div className={`ctn ${theme}`}>
<div className={`app ${theme}`}>
<h1>Current theme: {theme}</h1>
<button onClick={toggleTheme}>Toggle Theme</button>
</div>
</div>
);
如何查看本地存储中的变量
创建键值对变量并将其保存到本地存储后，您可以使用以下步骤在浏览器中查看它们：
- 打开 Chrome 并导航到设置本地存储变量的网站。
- 右键单击页面上的任意位置，然后从上下文菜单中选择“检查”。
- 在打开的开发人员工具面板中，单击“应用程序”选项卡。
- 在左侧边栏中，展开“存储”部分。
- 单击“本地存储”，然后选择网站的域。
- 本地存储键值对将显示在右侧窗格中。
这是完整的 JSX 文件
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;
