React 应用中持久化数据管理是常见需求，浏览器 localStorage 提供了便捷的解决方案。本文将详解如何创建一个自定义 React Hook，useLocalStorage，实现与 localStorage 的无缝集成。此 Hook 不仅支持 localStorage 中数据的存储、读取和删除，还提供直观的界面进行状态管理。
1. localStorage 工具函数
在创建 Hook 之前，先定义一组与 localStorage 交互的工具函数，用于安全地设置、获取和删除数据，并处理潜在错误。
setItem 函数：安全地将数据保存到 localStorage
<code class="typescript">export function setItem(key: string, value: unknown) {
try {
window.localStorage.setItem(key, JSON.stringify(value));
} catch (err) {
console.error(err);
}
}</code>
功能：
- 使用
JSON.stringify序列化值。 - 将数据保存到 localStorage 的指定键下。
- 错误处理：捕获并记录潜在错误（例如，存储配额超出）。
getItem 函数：检索并解析数据
<code class="typescript">export function getItem<T>(key: string): T | undefined {
try {
const data = window.localStorage.getItem(key);
return data ? (JSON.parse(data) as T) : undefined;
} catch (err) {
console.error(err);
}
}</code>
功能：
- 使用指定键获取数据。
- 将序列化值解析回原始类型。
- 类型安全：使用 TypeScript 的泛型
T保证类型一致性。 - 若键不存在，返回
undefined。
removeItem 函数：按键删除数据
<code class="typescript">export function removeItem(key: string) {
try {
window.localStorage.removeItem(key);
} catch (err) {
console.error(err);
}
}</code>
功能：
- 调用
localStorage.removeItem删除键值对。 - 捕获并记录任何错误。
有了这些工具函数，我们便拥有了强大的 localStorage 交互工具。接下来，将它们集成到自定义 Hook 中。
2. useLocalStorage Hook
React Hooks 提供了管理状态和副作用的简洁方法。我们将使用它们创建一个 useLocalStorage Hook，结合状态逻辑和 localStorage 工具函数。
Hook 初始化
这是 Hook 的基本结构：
<code class="typescript">import { useState } from "react";
import { getItem, setItem, removeItem } from "@/utils/localStorage";
export default function useLocalStorage<T>(key: string, initialValue: T) {
const [value, setValue] = useState(() => {
const data = getItem(key);
return (data || initialValue) as T;
});
// ...additional logic
}</code>
参数：
-
key: 与 localStorage 交互的键。 -
initialValue: localStorage 中不存在值时使用的默认值。
状态初始化：
Hook 通过调用 getItem 检查 localStorage 中是否存在数据来初始化状态 (value)。若不存在，则使用提供的 initialValue。
状态变化分发
handleDispatch 函数管理对本地状态和 localStorage 的更新：
<code class="typescript">type DispatchAction<T> = T | ((prevState: T) => T);
function handleDispatch(action: DispatchAction<T>) {
if (typeof action === "function") {
setValue((prevState) => {
const newValue = (action as (prevState: T) => T)(prevState);
setItem(key, newValue);
return newValue;
});
} else {
setValue(action);
setItem(key, action);
}
}</code>
工作原理：
- 若
action是函数，则将其视为类似 reducer 的更新器，应用于当前状态 (prevState)。 - 否则，将其视为新值。
- 更新状态后，将新值存储到 localStorage。
清除状态
clearState 函数用于重置状态并删除相应的 localStorage 数据：
<code class="typescript">function clearState() {
setValue(undefined as T);
removeItem(key);
}</code>
功能：
- 将状态重置为
undefined。 - 删除关联的 localStorage 键值对。
Hook 的 API 返回值
最后，Hook 返回一个包含三个元素的数组：
<code class="typescript">return [value, handleDispatch, clearState] as const;</code>
API：
-
value: 当前状态。 -
handleDispatch: 更新状态的函数。 -
clearState: 重置状态和 localStorage 的函数。
3. 使用 useLocalStorage
以下示例演示如何在 React 组件中使用此 Hook：
<code class="typescript">import useLocalStorage from "@/hooks/useLocalStorage";
function Counter() {
const [count, setCount, clearCount] = useLocalStorage<number>("counter", 0);
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
<button onClick={() => setCount((prev) => prev - 1)}>Decrement</button>
<button onClick={clearCount}>Reset</button>
</div>
);
}</code>
关键功能：
- 使用 localStorage 使计数器在页面刷新后保持持久化。
- 更新状态 (
setCount) 会自动同步到 localStorage。 -
clearCount函数重置计数器并将其从 localStorage 中删除。
完整代码 (localStorage.ts 和 useLocalStorage.ts)
(此处省略完整代码，与原文提供的代码相同)
4. 结论
useLocalStorage Hook 是一个强大且可复用的抽象，用于管理在页面刷新之间持久化的状态。它具有类型安全、优雅的错误处理机制，并为开发者提供了直观的界面。使用此 Hook，可以轻松地将 localStorage 集成到 React 应用中，保持代码库的整洁和可维护性。
您是否尝试过创建自己的自定义 Hook？欢迎在评论区分享您的经验！
