当前位置：首页 > 文章列表 > 文章 > 前端 > 使用 useLocalStorage Hook 在 React 中管理本地存储

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

2025-01-27 22:01:09 0浏览收藏

有志者，事竟成！如果你在学习文章，那么本文《使用 useLocalStorage Hook 在 React 中管理本地存储》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

React 应用中持久化数据管理是常见需求，浏览器 localStorage 提供了便捷的解决方案。本文将详解如何创建一个自定义 React Hook，useLocalStorage，实现与 localStorage 的无缝集成。此 Hook 不仅支持 localStorage 中数据的存储、读取和删除，还提供直观的界面进行状态管理。

1. localStorage 工具函数

在创建 Hook 之前，先定义一组与 localStorage 交互的工具函数，用于安全地设置、获取和删除数据，并处理潜在错误。

setItem 函数：安全地将数据保存到 localStorage

export function setItem(key: string, value: unknown) {
  try {
    window.localStorage.setItem(key, JSON.stringify(value));
  } catch (err) {
    console.error(err);
  }
}

功能：

使用 JSON.stringify 序列化值。
将数据保存到 localStorage 的指定键下。
错误处理：捕获并记录潜在错误（例如，存储配额超出）。

getItem 函数：检索并解析数据

export function getItem(key: string): T | undefined {
  try {
    const data = window.localStorage.getItem(key);
    return data ? (JSON.parse(data) as T) : undefined;
  } catch (err) {
    console.error(err);
  }
}

功能：

使用指定键获取数据。
将序列化值解析回原始类型。
类型安全：使用 TypeScript 的泛型 T 保证类型一致性。
若键不存在，返回 undefined。

removeItem 函数：按键删除数据

export function removeItem(key: string) {
  try {
    window.localStorage.removeItem(key);
  } catch (err) {
    console.error(err);
  }
}

功能：

调用 localStorage.removeItem 删除键值对。
捕获并记录任何错误。

有了这些工具函数，我们便拥有了强大的 localStorage 交互工具。接下来，将它们集成到自定义 Hook 中。

2. useLocalStorage Hook

React Hooks 提供了管理状态和副作用的简洁方法。我们将使用它们创建一个 useLocalStorage Hook，结合状态逻辑和 localStorage 工具函数。

Hook 初始化

这是 Hook 的基本结构：

import { useState } from "react";
import { getItem, setItem, removeItem } from "@/utils/localStorage";

export default function useLocalStorage(key: string, initialValue: T) {
  const [value, setValue] = useState(() => {
    const data = getItem(key);
    return (data || initialValue) as T;
  });

  // ...additional logic
}

参数：

key: 与 localStorage 交互的键。
initialValue: localStorage 中不存在值时使用的默认值。

状态初始化：

Hook 通过调用 getItem 检查 localStorage 中是否存在数据来初始化状态 (value)。若不存在，则使用提供的 initialValue。

状态变化分发

handleDispatch 函数管理对本地状态和 localStorage 的更新：

type DispatchAction = T | ((prevState: T) => T);

function handleDispatch(action: DispatchAction) {
  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);
  }
}

工作原理：

若 action 是函数，则将其视为类似 reducer 的更新器，应用于当前状态 (prevState)。
否则，将其视为新值。
更新状态后，将新值存储到 localStorage。

清除状态

clearState 函数用于重置状态并删除相应的 localStorage 数据：

function clearState() {
  setValue(undefined as T);
  removeItem(key);
}

功能：

将状态重置为 undefined。
删除关联的 localStorage 键值对。

Hook 的 API 返回值

最后，Hook 返回一个包含三个元素的数组：

return [value, handleDispatch, clearState] as const;

API：

value: 当前状态。
handleDispatch: 更新状态的函数。
clearState: 重置状态和 localStorage 的函数。

3. 使用 useLocalStorage

以下示例演示如何在 React 组件中使用此 Hook：

import useLocalStorage from "@/hooks/useLocalStorage";

function Counter() {
  const [count, setCount, clearCount] = useLocalStorage("counter", 0);

  return (
    
      Counter: {count}
      
      
      
    
  );
}

关键功能：