自定义 Hook 钩子，实现实时化更新本地缓存

import { useState } from 'react';
/**
 * 创建一个持久化到 localStorage 的有状态的值，并创建一个函数来更新它。
 * @param {string} keyName:key
 * @param {string} defaultValue:初始值
 * @return {Function} storedValue：本地存储值，setValue：修改值的函数，removeValue：清除函数
 */
const useLocalStorage = (keyName, defaultValue) =>
{
  // 定义 storedValue
    const [storedValue, setStoredValue] = useState(() =>
    {
      // 此时的 try 可以捕获到 localStorage 可能抛出的错误
        try
        {
            const value = window.localStorage.getItem(keyName);
            if (value)
            {
                return JSON.parse(value);
            } else
            {
                window.localStorage.setItem(keyName, JSON.stringify(defaultValue));
                return defaultValue;
            }
        } catch (error)
        {
            console.error(error);
            return defaultValue;
        }
    });
    const setValue = newValue =>
    {
        try
        {
            window.localStorage.setItem(keyName, JSON.stringify(newValue));
        } catch (error)
        {
            throw (error)
        }
        setStoredValue(newValue);
    };
    const removeValue = () =>
    {
        try
        {
            window.localStorage.removeItem(keyName);
        } catch (error)
        {
            throw (error)
        }
        setStoredValue('');
    };
  // return 三个属性
    return [storedValue, setValue, removeValue];
};
export default useLocalStorage

import useLocalStorage from './hooks/useLocalStorage '
const index = () =>
{
  // hooks 解构属性
    const [name, setName, clearName] = useLocalStorage('userName', 'NULL');
    const onChangeHandler = (e) =>
    {
        const { target } = e
        // 已经实时修改本地缓存
        setName(target.value)
    }
    const clearHandler = () =>
    {
        clearName()
    }
    return (
        <div>
            <h1>{name}</h1>
            <input value={name} onChange={onChangeHandler} />
            <button onClick={clearHandler}>Clear</button>
        </div>
    );
};
export default index