react + electron实现登录的时候记住记住密码 思路 代码

以下是一个简单的实现记住密码的示例代码，基于 React 和 electron-store：

import React, { useState, useEffect } from 'react';
import Store from 'electron-store';

const store = new Store();

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

  useEffect(() => {
    const userData = store.get('userData');
    if (userData) {
      setUsername(userData.username);
      if (userData.rememberMe) {
        setPassword(userData.password);
        setRememberMe(true);
      }
    }
  }, []);

  const handleLogin = () => {
    // 执行登录操作
    if (rememberMe) {
      store.set('userData', { username, password, rememberMe: true });
    } else {
      store.delete('userData');
      store.set('userData', { username, rememberMe: false });
    }
  };

  const handleLogout = () => {
    // 执行退出登录操作
    store.delete('userData');
  };

  return (
    <div>
      <input type="text" value={username} onChange={e => setUsername(e.target.value)} />
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
      <label>
        <input type="checkbox" checked={rememberMe} onChange={e => setRememberMe(e.target.checked)} />
        记住密码
      </label>
      <button onClick={handleLogin}>登录</button>
      <button onClick={handleLogout}>退出登录</button>
    </div>
  );
};

export default Login;

在上面的示例代码中，我们定义了一个 `Login` 组件，其中使用了 React 的状态来保存用户名、密码和“记住密码”状态。在页面加载时，我们使用 `useEffect` 钩子函数从本地存储库中加载保存的数据，并将这些数据保存到 React 的状态中。在登录操作中，如果“记住密码”被勾选，则将用户名和密码保存到本地存储库中；否则，只保存用户名到本地存储库中。在退出登录操作中，我们从本地存储库中删除保存的数据。

请注意，上面的示例代码仅用于演示目的，实际实现中可能需要进行更详细的错误处理和输入验证。