如何在 React 中获得多个用户

问题描述 投票:0回答:0

我想在

localstorage
中获得一些用户并在登录页面中使用它。 在下面的代码中,我只能在 localstorage 中保存一个用户,通过添加一个新用户,删除旧用户并替换新用户。 但是我希望添加每个新用户时不要删除旧用户,并且我想添加尽可能多的用户。

登录页面:

const Signin = () => {

    const [values, setValue] = useState({ email: "", password: "" });
    const navigate = useNavigate();

    const onChangeInput = (name,e) => {

        setValue(pvalue => ({
            ...pvalue,
            [name]: e.target.value,
        }));

    };

    const submit = () => {
        let users = JSON.parse(localStorage.getItem("users") || "[]")
        users.push({values})

        localStorage.setItem('users', JSON.stringify(users))
        
    }

    function handleSubmit(e) {
        e.preventDefault()
        localStorage.setItem("user", JSON.stringify(values));

        const loggeduser = JSON.parse(localStorage.getItem("user"));
        if (
            values.email === loggeduser.email &&
            values.password === loggeduser.password
        ) {
            alert("Emaill & Password is available!!!")
        }
        else{
            navigate("/");
        }
    };

    return (
        <div className="text-center m-5-auto">
            <form onSubmit={submit}>
                <p>
                    <label>Email address:</label><br />
                    <input
                        name="email"
                        value={values.email}
                        onChange={(e)=>onChangeInput('email',e)}
                    />
                </p>
                <p>
                    <label>Password:</label><br />
                    <input
                        name="password"
                        value={values.password}
                        onChange={(e)=>onChangeInput('password',e)}
                    />
                </p>
                <p>
                    <button id="btn" type="submit" onClick={handleSubmit}>Register</button>
                </p>
            </form>
        </div>
    );
}

export default Signin;

我做了各种搜索,没有找到任何结果

javascript reactjs forms local-storage digital-signature
© www.soinside.com 2019 - 2024. All rights reserved.