效果图

usePersistedState

import { useState, useEffect, useRef } from 'react'
/**
 * 返回一个有状态的值，持久化在 localStorage 中，并有一个函数来更新它。
 * @param {string} localStorage-Key  
 * @param {string} localStorage-value 
 * @return {value,setValue} value-新值 setValue-修改值的方法
 */
const usePersistedState = (keyName, defaultValue) =>
{
    const [value, setValue] = useState(defaultValue);
    const nameRef = useRef(keyName);

    useEffect(() =>
    {
        try
        {
            const storedValue = localStorage.getItem(keyName);
            if (storedValue !== null) setValue(storedValue);
            else localStorage.setItem(keyName, defaultValue);
        } catch {
            setValue(defaultValue);
        }
    }, []);

    useEffect(() =>
    {
        try
        {
            localStorage.setItem(nameRef.current, value);
        } catch { }
    }, [value]);

    useEffect(() =>
    {
        const lastName = nameRef.current;
        if (keyName !== lastName)
        {
            try
            {
                localStorage.setItem(keyName, value);
                nameRef.current = keyName;
                localStorage.removeItem(lastName);
            } catch { }
        }
    }, [keyName]);

    return [value, setValue];
};
export default usePersistedState

index

import { useState } from 'react'
import usePersistedState from './useLocalStorage '

const index = () =>
{
    const MyComponent = ({ name }) =>
    {
        const [val, setVal] = usePersistedState(name, '少主');
        console.log(val);
        return (
            <input
                value={val}
                onChange={e =>
                {
                    setVal(e.target.value);
                }}
            />
        );
    };

    const [name, setName] = useState('userName');
    return (
        <div>
            <MyComponent name={name} />
            <input
                value={name}
                onChange={e =>
                {
                    setName(e.target.value);
                }}
            />
        </div>
    );
};
export default index