通过cookie、PHP、localstorage实现登录注册功能

逃离我推掉我的手 2022-01-07 08:37 347阅读 0赞

## 1.cookie实现简单的登录注册 ##

**注册功能：**

<body>
    	用户名：<input type="text" id="uname" /></br>
    	密    码：<input type="text" id="upwde" /></br>
    	<input type="button" value="注册" id="reg">
    </body>
    
    <script>
         reg.onclick =  function(){
        		 let userJson = {
    	           			 "uname" : uname.value,
    	            		"upwd"   : upwd.value
    				}
    				document.cookie = "userinfo"+JSON.stringify( userJson);
    				location.href = "login.html"
         }
    </script>

## 登录功能： ##

<body>
    		用户名 ： <input type="text" id="uname" /><br>
    		密　码 ： <input type="text" id="upwd" /><br>
    		<input type="button" value="登录" id="login"/>
    	</body>
    
    <script>
    	//页面加载取出cookie数据
    	window.onload = function(){
    		let str = document.cookie;   //取出的数据是字符串
    		//userinfo={"uname":"13233333333","upwd":"222"}; aa=90; hh=09
    		let arr = str.split("; ");
    		//['aa=90','userinfo={"uname":"13233333333","upwd":"222"}','hh=09']
    		let userTxt = "";
    		for( let i = 0 ; i  < arr.length ; i++ ){
    			let item = arr[i].split("=");
    			if( item[0] == "userinfo" ){
    				userTxt = item[1];//{"uname":"13233333333","upwd":"222"}
    			}
    		}
    		let userJson = JSON.parse( userTxt );
    		//登录功能实现
    		login.onclick = function(){
    			if( uname.value == userJson.uname && upwd.value == userJson.upwd ){
    				alert( "登录成功" );
    			}else{
    				alert( "登录失败" );
    			}
    		}
    	}

**cookie函数的封装**

//设置cookie
    function setCookie(key,value,day){
    	if( day ){
    		let now = new Date();
    		now.setDate( now.getDate() + day );
    		document.cookie = `${key}=${value};expires=${ now }`;
    	}else{
    		document.cookie = `${key}=${value}`;
    	}
    }
    //获取cookie
    function getCookie(key){
    	let str = document.cookie;
    	if( str ){ //如果有cookie
    		str = str.replace(/\s/g,"");
    		let arr = str.split(";");
    		for( let i = 0 ; i  < arr.length ; i++ ){
    			let item = arr[i].split("=");
    			if( item[0] == key ){
    				return item[1];//返回该key对应的value值
    			}
    		}
    	}
    	return "";//没有cookie 返回一个空字符串
    }
    //删除cookie  将值设置为空
    function removeCookie(key){
    	setCookie( key , "" , -1 );
    }

## 2.localstorage实现登录注册功能 ##

**注册功能**

<body>
    		手机号 ：<input type="text" id="tel" /><br>
    		密　码 ：<input type="text" id="pwd" /><br>
    		<input type="button" value="注册" id="reg" />
    	</body>
    
    reg.onclick = function(){
    	//正则验证手机号
    	let regTel = /^1[3578]\d{9}$/;    /以13|5|7|8开头的11位数字
    	let telStr = tel.value;
    	if( !regTel.test(telStr) ){
    			alert("输入不合法")；
    			return false；
    		}
    	//密码
    	let regPwd = /^.{6,}$/;
    	let pwsStr = pwd.value;
    	if( !regPwd.test( pwsStr ) ){
    		alert( "密码不合法" );
    		return false;
    	}
    	
    	//如果手机号和密码都合法 开始存储数据
    	let userObj = {
    		"tel" : telStr,
    		"pwd" : pwsStr
    	}
    	//存数据，存数据时将json对象转换成字符串
    	localStorage.setItem( "userInfo" , JSON.stringify( userObj ) );
    	//页面跳转
    	location.href = "login.html";
    }

**登录功能**

<body>
    		手机号 ：<input type="text" id="tel" /><br>
    		密　码 ：<input type="text" id="pwd" /><br>
    		<input type="button" value="登陆" id="login" />
    	</body>
    
    window.onload = function(){
    		//先取出数据
    		let userText = localStorage.getItem( "userInfo" );
    		let userJson = {};
    		if( userText != null ){
    		//把存进去的数据转化成对象
    			userJson = JSON.parse( userText );
    		}
    		login.onclick = ()=>{
    			//取出用户输入的用户名和密码
    			let telStr = tel.value;
    			let pwdStr = pwd.value;
    			if( telStr == userJson.tel && pwdStr == userJson.pwd ){
    				alert( "登陆成功" );
    			}else{
    				alert( "登陆失败" );
    			}
    		}
    	}

## 3.localstorage实现登录注册 ##

**注册功能实现**

<body>
    	      <form action="register.php" method="post">
    	        			邮　箱：   <input type="text" name="email" id="email"/><br>
    	        			密　码：   <input type="text" name="upwd" id="upwd" /><br>
    	        					<input type="submit" value="注册"/>
    	        		</form>
    	    </body>
    
    	    <script>
    	    
    		    let flagEmail = null;
    		    	email.onblur = function(){
    		    		let reg = /@/;
    		    		if( reg.test(this.value)){
    		    			flagEmail = true;
    		    		}else{
    		    			flagEmail = false;
    		    			alert("非合法邮箱")
    		    		}
    		    	}
    		    	
    		    	let flagPwd = null;
    		    	upwd.onblur = function(){
    		    		let reg = /\w{6,18}/
    		    		if( reg.test( this.value)){
    		    			flagPwd = true;
    		    		}else{
    		    			flagPwd = false;
    		    			alert("密码不安全")
    		    		}
    		    	}
    		    	
    		    	//form表单传值
    		    	let oForm = document.forms[0]
    		    	oForm.onsubmit = function(){
    		    		if(flagEmail && flagPwd ){
    		    			return true;
    		    		}else{
    		    			return false;
    		    		}
    		    	}
    	    </script>

PHP文件

<?php
    	include "public.php";
    	//1.接收数据
    	$email = $_POST["email"];
    	$upwd = $_POST["upwd"];
    	
    	//先查询邮箱在数据库中是否存在
    	$sqlSel = "select * from users where email = '$email'";
    	$res = mysql_query( $sqlSel);
    	$arr = mysql_fetch_array($res);
    	if( $arr ){
    		echo "<script>alert('邮箱已被注册');location.href = 'register.html'</script>";
    	}else{
    		$sql = "insert into users (`email`,`upwd`) values( '$email','$upwd' )";	
    		$row = mysql_query( $sql );
    		if( $row ){
    			echo "<script>alert('注册成功'); location.href = 'login.html'</script>";
    		}else{
    			echo "<script>alert('注册失败'); location.href = 'register.html'</script>";
    		}
    	}
    	
    	/*include "public.php";
    	//1、接收数据
    	$email = $_POST["email"];
    	$upwd = $_POST["upwd"];
    	 
    	//先查询邮箱email在数据库中是否存在  
    	$sqlSel = "select * from users where email = '$email'";
    	//mysql_query() 函数执行一条 MySQL 查询。
    	$res = mysql_query( $sqlSel );
    	//mysql_fetch_array() 函数从结果集中取得一行作为关联数组，或数字数组，或二者兼有
    	//返回根据从结果集取得的行生成的数组，如果没有更多行则返回 false
    	$arr = mysql_fetch_array( $res );
    	if( $arr ){ //数组存在 说明邮箱已经被注册
    		echo "<script>alert('该邮箱已经被注册');location.href='register.html';</script>";
    	}else{
    		//第四步 ： 编写sql语句  注册功能--insert
    		$sql = "insert into users(`email`,`upwd`) values('$email','$upwd')";
    		
    		//第五步 ： 执行sql语句
    		$row = mysql_query( $sql ); //返回受影响的行数
    		//3、返回结果
    		if( $row ){
    			echo "<script>alert('注册成功');location.href='login.html';</script>";
    		}else{
    			echo "<script>alert('注册失败');location.href='register.html';</script>";
    		}
    	}
    	*/
    	
    ?>

## 登录功能 ##

PHP文件

<?php
    	//引入外部文件
    	include "public.php";
    	$email = $_POST["email"];
    	$upwd = $_POST["upwd"];
    	
    	$sql = "SELECT * FROM `users` WHERE  `email` = '$email'";
    	$res = mysql_query( $sql );
    	$arr = mysql_fetch_array( $res );
    	if( $res){
    		if( $arr["upwd"] == $upwd){
    			echo "<script>alert('登录成功');location.href = 'index.php?email=$email';</script>";
    		}else{
    			echo "<script>alert('密码错误');location.href = 'login.html';</script>";
    		}
    	}else{
    		echo "<script>alert('用户名不存在');location.href = 'login.html'</script>";
    	}
    	
    	/*
    	//引入外部的php文件
    	include "public.php";
    	
    	//1、接收数据
    	$email = $_POST["email"];
    	$upwd = $_POST["upwd"];
    	//2、处理数据
    	
    	//第四步 ： 编写sql语句  登陆功能--select
    	$sql = "SELECT * FROM `users` WHERE `email`='$email'";
    	
    	//第五步 ： 执行sql语句  mysql_query执行查询操作时，返回一个资源类型， 返回一个结果集合
    	$res = mysql_query($sql);  
    	
    	//取出资源类型中的数据  取出结果集中的数据  mysql_fetch_array()  一次只能取一行数据 并返回一个数组
    	$arr = mysql_fetch_array( $res );
    	
    	//3、返回结果
    	if( $arr ){//如果数组存在 说明用户名是存在
    		if( $arr["upwd"] == $upwd ){//判断密码是否相等
    			//登录成功  跳转到学生成绩的列表上
    			echo "<script>alert('登录成功');location.href='index.php?email=$email';</script>";
    		}else{
    			echo "<script>alert('密码错误');location.href='login.html';</script>";
    		}
    	}else{
    		//用户名不存在
    		echo "<script>alert('用户名不存在');location.href='login.html';</script>";
    	}*/