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>";
}
}
*/
?>
<!--
排错:
1、确认数据库是否存在
2、确认sql语句是否正确(数据是否接到 语法是否有问题)
3、如果数据能插入到数据库 但是没有提示,检查返回结果的 字符串是否正确
-->
登录功能
<body>
<form action="login.php" method="post">
邮 箱: <input type="text" name="email" /><br>
密 码: <input type="text" name="upwd" /><br>
<input type="submit" value="登录"/>
</form>
</body>
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>";
}*/