使用React hook实现remember me功能

// 定义一个自定义Hook，用于处理"remember me"的功能  
const useRememberMe = (initialUsername = '', initialRemember = false) => {    
  
  // 使用React的useState Hook来定义三个状态变量：  
  // username: 用于存储用户名  
  // remember: 用于标记用户是否选择了"remember me"选项  
  // isRemembered: 用于标记用户名是否被记住（从localStorage中恢复）  
  const [username, setUsername] = useState(initialUsername);    
  const [remember, setRemember] = useState(initialRemember);    
  const [isRemembered, setIsRemembered] = useState(false);    
  
  // 使用React的useEffect Hook，在组件挂载时执行（仅执行一次）  
  useEffect(() => {    
    // 从localStorage中尝试获取存储的用户名和"remember me"的状态  
    const storedUsername = localStorage.getItem('username');    
    const storedRemember = localStorage.getItem('remember');    
  
    // 如果用户名存在且"remember me"被选中，则恢复这些状态  
    if (storedUsername && storedRemember === 'true') {    
      setUsername(storedUsername);    
      setRemember(true);    
      setIsRemembered(true);    
    }    
  }, []);  // 空的依赖数组表示这个effect只会在组件挂载时运行一次  
  
  // 另一个useEffect Hook，当remember或username状态变化时执行  
  useEffect(() => {    
    // 如果用户选择了"remember me"，则将用户名和状态保存到localStorage中  
    if (remember) {    
      localStorage.setItem('username', username);    
      localStorage.setItem('remember', 'true');    
    } else {    
      // 否则，从localStorage中移除这些信息  
      localStorage.removeItem('username');    
      localStorage.removeItem('remember');    
    }    
  }, [remember, username]);  // 当remember或username变化时，这个effect会重新运行  
  
  // 返回一个对象，包含所有的状态变量和更新状态的方法，供组件使用  
  return {    
    username,    
    setUsername,    
    remember,    
    setRemember,    
    isRemembered,    
  };    
};   

// 定义一个React函数组件，用于显示登录表单  
const LoginForm = () => {    
  // 使用上面定义的useRememberMe Hook，并解构返回的对象，获取状态和更新状态的方法  
  const {    
    username,    
    setUsername,    
    remember,    
    setRemember,    
    isRemembered,    
  } = useRememberMe();    
  
  // 定义一个处理表单提交的函数，目前仅阻止默认行为（即页面刷新），具体的登录逻辑需要在这里实现  
  const handleSubmit = (e) => {    
    e.preventDefault();    
    // 处理登录逻辑...    
  };    
  
  // 返回JSX，描述组件的UI  
  return (    
    <form onSubmit={handleSubmit}>    
      {/* 用户名输入框，值与username状态绑定，当输入变化时更新username状态 */}  
      <input    
        type="text"    
        placeholder="Username"    
        value={username}    
        onChange={(e) => setUsername(e.target.value)}    
      />    
      {/* 密码输入框，目前没有绑定任何状态或处理逻辑 */}  
      <input    
        type="password"    
        placeholder="Password"    
        // 你需要添加密码状态和处理逻辑    
      />    
      {/* "Remember me"复选框，状态与remember绑定，当选择变化时更新remember状态 */}  
      <label>    
        <input    
          type="checkbox"    
          checked={remember}    
          onChange={(e) => setRemember(e.target.checked)}    
        />    
        Remember me    
      </label>    
      {/* 提交按钮 */}  
      <button type="submit">Login</button>    
    </form>    
  );    
};    
  
// 在React应用中渲染LoginForm组件  
// 注意：在实际应用中，你通常会在一个父组件或路由中渲染这个组件，而不是直接这样写  
<LoginForm />