如何通过react中的登录功能使用本地存储

import React, { useState, useEffect } from 'react';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  useEffect(() => {
    // 监听表单字段的变化
  }, [username, password]);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 验证用户输入
    if (username === 'admin' && password === 'password') {
      // 将用户信息存储到本地存储
      localStorage.setItem('isLoggedIn', 'true');
      localStorage.setItem('username', username);
      // 重定向到其他页面
      window.location.href = '/dashboard';
    } else {
      alert('用户名或密码错误');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="用户名"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="密码"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">登录</button>
    </form>
  );
};

export default Login;