登录注册功能

最新推荐文章于 2024-05-24 23:29:55 发布

xiaozhen0610

最新推荐文章于 2024-05-24 23:29:55 发布

阅读量720

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hjc2h11ji1aa.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

用户名：
密码：
注册清空登录

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<style>
.marg{width:1200px;margin:0 auto;}
</style>
</head>
<body>
<div class="marg">
<form action="#" οnsubmit="return reginsterSubmitForm()">
用户名：<input type="text" id="userName"/><br />
密码：<input type="text" id="password"/><br />
<button type="submit" class="btn btn-success" >注册</button>
<button type="reset" class="btn btn-success">清空</button>
</form>
<a href="index.html">登录</a>
</div>
<script>
function reginsterSubmitForm(){
var userName = document.getElementById("userName").value;
var password = document.getElementById("password").value;
if(!userName || !password){
return false;
}
var userInfo ={
userName:userName,
password:password
}
var userData = getUserData("reginsterUserInfos");
if(!userData){
var reginsterUserInfos = [
userInfo
];
localStorage.setItem("reginsterUserInfos",JSON.stringify(reginsterUserInfos))
}else{
var data = JSON.parse(userData);
var bool = true;
for (var i=0;i<data.length;i++){
if(data[i].userName == userInfo.userName){
alert("该用户已被注册！");
bool = false;
return false;
break;
}
}
if(bool){
data.push(userInfo);
localStorage.setItem("reginsterUserInfos",JSON.stringify(data))
}
}
}
function getUserData(userKey){
return localStorage.getItem(userKey)
}
</script>
</body>
</html>

登陆

用户名：
密码：
记住我登录清空注册

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<style>
.marg{width:1200px;margin:0 auto;}
</style>
</head>
<body οnlοad="getStorage()">
<div class="marg">
<form οnsubmit="return loginSubmitInput()" action="#">
用户名：<input type="text" id="email"/> <br />
密码：<input type="text" id="password"/> <br />
<input type="checkbox" id="rememberMe"/>记住我
<button type="submit" class="btn btn-success" >登录</button>
<button type="reset" class="btn btn-success">清空</button>
</form>
<a href="register.html">注册</a>
</div>
<script>
function loginSubmitInput(){
var emailValue = document.getElementById("email").value;
var passwordValue = document.getElementById("password").value;

if(emailValue == "" || passwordValue == ""){
return false;
}
var reginsterUserInfos = getUserLoginInfo("reginsterUserInfos");
if(!reginsterUserInfos){
alert("该用户未注册！请先注册！")
return false;
}else{
var userData = JSON.parse(reginsterUserInfos);
var bool = true;
for(var i=0;i<userData.length;i++){
if(userData[i].userName == emailValue){
if(userData[i].password == passwordValue){
bool = false;
var isLogin = document.getElementById("rememberMe").checked;
setStorage(emailValue,passwordValue,isLogin)
return true;
break;
}else{
alert("密码不正确！")
bool = false;
return false;
break;
}
}
}
}
if(bool){
alert("该用户未注册！请先注册！");
return false;
}
}
function setStorage(email,password,isLogin){
var userLoginRemrmberInfo = {
email:email,
password:password,
isLogin:isLogin
}
if(isLogin){
localStorage.setItem("userLoginRemrmberInfo",JSON.stringify(userLoginRemrmberInfo))
}else{
localStorage.removeItem("userLoginRemrmberInfo");
}
}
function getStorage(){
var data = localStorage.getItem("userLoginRemrmberInfo");
if(data){
var storageData = JSON.parse(data);
document.getElementById("email").value=storageData.email;
document.getElementById("password").value = storageData.password;
document.getElementById("rememberMe").checked = storageData.isLogin;
}
}

function getUserLoginInfo(userKey){
return localStorage.getItem(userKey);
}
</script>
</body>
</html>