制作网页我们通常都要做一个登陆界面,如果对于不是安全性要求很高的网站,这个登录界面我我们当然不希望频繁输入账户密码来验证身份,我们想要的是只要一次验证,就可以长时间保持登陆状态。
session虽然可以实现跳过登陆验证,但是它是临时的,关闭页面后或者关闭浏览器之后,它就会消失,我觉得不是很方便。
学习链接:https://www.runoob.com/php/php-sessions.html
后来我试过一种方法就是就是给数据表(账户密码信息的)添加一列【登陆状态】列,通过识别【登陆状态】列的值来确定该用户是否已经经过验证了。
但是,以上的两种方法都不是我想要的,我需要的是只要在同个浏览器登陆该页面,我只要登陆验证身份一次,然后很长一段时间都能不需要验证,直接到我的主页。
cookie可以实现,它是服务器存储在电脑里面的,可以设置cookie时效,一天,一个月,一年都OK。
学习链接:https://www.runoob.com/php/php-cookies.html
----------------------------===---------------------------------------------------------------------------------------------------------
以下是正文
js可以设置cookie,学习链接:https://www.runoob.com/js/js-cookies.html
php也可以设置cookie,学习链接:https://www.runoob.com/php/php-cookies.html
我采用的是php设置cookie的方法
然后js写在HTML里面,获取cookie
下面这个函数是核心,不是我写的,其实整篇文章这个函数最关键,我写这边文章的主要目的是整体理一下思路,我想把自己的思路写下来,也可以提供你们参考。这个函数我是在网上找的,很容易找到,里面的那些代码我没细看,我这里直接调用了,加入参数就能用,下面我会细致地讲。
<script type="text/javascript">
function getCookie(c_name){
if (document.cookie.length > 0){
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1){
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1){
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
</script>
先放效果图
登陆页面(账户:A1234;密码:1234)
账户密码错误弹窗显示
账户密码正确,进入我的主页,点击退出登陆,可以回到登陆页面
四个文件(全部)
1.html
2.php
my.html
my.php
直接放代码(附解析)
1.html(登录页面)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
//这一段代码是在html文件刚加载的时候就要执行的,也就是说,每次刷新页面都会先判断cookie在不在
//cookie失效的话,在接着执行后面的html代码
<script type="text/javascript">
function getCookie(c_name){
if (document.cookie.length > 0){
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1){
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1){
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
//调用函数,括号里面参数是php设置cookie的名称是"nnn",要加双引号
var nc= getCookie("nnn");
//我这里提醒一下,cookie失效之后,它的值并不是空,而是很长的一段英文数字组合(26位)
//判断cookie是否是A开头,同时也要是5位,如果是就直接跳转到【我的主页】
if((nc[0]=='A')&&(nc.length==5)){
window.location.href="http://192.168.2.107/test/login/my.html";
}
</script>
</head>
<body >
<a href="http://192.168.2.107/test/login/1.html">我的主页</a>
//这里设置一个指向本页的链接,如果没登录验证过就留在登陆页面,验证过就直接到【我的主页】
<p>js获取PHP设置的cookie实例</p>
<br>
//表单验证,这个在我上一篇博客讲过了,不赘述了
<form action="2.php" method="POST">
<input type="text" name="name" placeholder="请输入用户名"/>
<br>
<br>
<input type="password" name="password" placeholder="请输入密码"/>
<br>
<br>
<input name="login" type="button" value="登录" onclick=submit() />
</form>
</body>
</html>
2.php
<?php
//判断账号和密码的正确性
if(($_POST["name"]=="A1234")&&($_POST["password"]=="1234"))
{
$na=$_POST["name"];//保存正确的账号和密码
$pw=$_POST["pwd"];
//设置cookie,把正确的账号密码写入cookie,"nnn"是cookie的名称
//time()+3600*24*30,设置cookie有效时长为3600秒(1个小时)*24*30 =1个月
setcookie("nnn",$na,time()+3600*24*30);
setcookie("ppp",$pw,time()+3600*24*30);
header("location:http://192.168.2.107/test/login/my.html"); //跳转【我的主页】
}
else{
echo "<script language=\"JavaScript\">";
echo "alert(\"该用户不存在或者密码不正确\");history.back();</script>";
//如果账号密码不正确,弹出提示窗口
}
?>
my.html(【我的主页】页面)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="http://192.168.2.107/test/login/1.html">我的主页</a>
<br>
<p>这是我的主页</p>
<form action="my.php" method="POST">
<input name="ex" type="button" value="退出登录" onclick=submit() />
//点击退出登陆,会执行my.php文件,会把之前存的cookie失效,然后回到登陆页面
</form>
</body>
</html>
my.php
<?php
setcookie("nnn","",time()-3600);//令cookie失效
setcookie("ppp","",time()-3600);
header("location:http://192.168.2.107/test/login/1.html");//回到登陆页面
?>
代码思路图
应该能看得明白吧,写得很用心了,如果想移植我的代码的话,记得改那些地址,参数什么的,应该都懂得吧,有问题再问吧。
------------------------=====----------------------------------------------------------------------------------------------------------
爆肝之作,很详细了哈,希望对你们能有帮助,如果可以,可以点个赞,嘻嘻嘻。