react持久化useState 进行简单封装

代码

封装

import { useEffect, useState } from "react";

/**
 * 使用localStorage来存储和更新状态。
 * @param key localStorage中用于存储状态的键。
 * @param defaultValue 如果localStorage中没有值，则使用的默认值。
 * @returns 返回一个数组，包含状态值和更新状态的函数。
 */
function useLocalStorageState<T>(
  key: string,
  defaultValue: T
): [T, React.Dispatch<React.SetStateAction<T>>] {
  const [state, setState] = useState<T>(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue !== null ? JSON.parse(storedValue) : defaultValue;
  });
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);

  return [state, setState];
}
export default useLocalStorageState;

使用

import useLocalStorageState from "@/utils/storageStateHook";
import { Input } from "antd";

export default function Index() {
  const [inputValue, setInputValue] = useLocalStorageState("test", "");
  return (
    <div style={{ display: "flex" }}>
      <div>这是一个刷新但会存储状态的输入框</div>
      <Input
        value={inputValue}
        style={{ width: 200 }}
        onChange={(e) => setInputValue(e.target.value)}
      ></Input>
    </div>
  );
}

现在每当输入框内容更改时，input的内容都会被存储到本地。

注：有需要js版本的，可以直接把该工具函数直接扔给AI转换