问题

I want to get some user in localstorage and use it in login page.
In the following code, I was able to save only one user in localstorage, and by adding a new user, the old user is deleted and the new user is replaced.
But I want the old user not to be deleted by adding each new user and I want to add as many users as possible.

sign in page:

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("Email & 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;

I did various searches and did not find any results

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;

答案1

得分: 0

我希望以下的解决方案可能会对你有所帮助：

function handleSubmit(e) {
    e.preventDefault();
    if (
        values.email === loggeduser.email &&
        values.password === loggeduser.password
    ) {
        alert("邮箱和密码可用！");
    
        let users = JSON.parse(localStorage.getItem("users") || "[]");
        users.push({values});

        localStorage.setItem('users', JSON.stringify(users));
    }
    else {
        navigate("/");
    }
};

 function handleSubmit(e) {
e.preventDefault()
if (
values.email === loggeduser.email &&
values.password === loggeduser.password
) {
alert("Emaill & Password is available!!!")
let users = JSON.parse(localStorage.getItem("users") || "[]")
users.push({values})
localStorage.setItem('users', JSON.stringify(users))
}
else{
navigate("/");
}
};