自定义Hook-usePersistedState

最新推荐文章于 2025-06-03 18:54:56 发布

臧小川

最新推荐文章于 2025-06-03 18:54:56 发布

阅读量161

点赞数

分类专栏： react 文章标签： javascript 前端 react.js

臧小川

本文链接：https://blog.youkuaiyun.com/chuan0106/article/details/129142231

版权

react 专栏收录该内容

112 篇文章

订阅专栏

文章介绍了一个自定义ReactHook`usePersistedState`，该Hook用于在localStorage中持久化组件的状态。它接受一个键名和默认值，返回状态值和更新值的方法。在组件更新时，Hook会自动将状态保存到localStorage，确保页面刷新后仍能保持之前的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

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