<html>
<head>
<title>
Login Form Using local storage js-part3
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Login Form</h2>
<form action="#">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="psw" placeholder="Enter password" name="pwd" required>
</div>
<button type="button" onclick="saveData()" id="save_btn" class="btn btn-default">Submit</button>
</form>
</div>
</body>
<script>
let name=localStorage.getItem('name')?localStorage.getItem('name'):''
function saveData()
{
let email,psw;
email=document.getElementById("email").value;
psw=document.getElementById("psw").value;
let user_records=new Array();
user_records=JSON.parse(localStorage.getItem("users"))?JSON.parse(localStorage.getItem("users")):[]
if(user_records.some((v)=>{return v.email==email && v.psw==psw}))
{
alert("Login Pass");
let current_user=user_records.filter((v)=>{return v.email==email && v.psw==psw})[0]
localStorage.setItem('name',current_user.name);
localStorage.setItem('email',current_user.email);
window.location.href="home.html"
}
else
{
alert('Login Fail');
}
}
</script>
</html>
No comments:
Post a Comment
Practice and let me know for nw code snippets