使用 useLocalStorage Hook 在 React 中管理本地存储-js教程-PHP中文网

使用 useLocalStorage Hook 在 React 中管理本地存储

花韻仙語

发布： 2025-01-27 08:14:18

原创

1172人浏览过

使用 uselocalstorage hook 在 react 中管理本地存储

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。

状态变化分发

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

308

查看详情

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>

登录后复制

关键功能：