Gets cookie PHP settings by js (full examples to explain)

We create web pages generally have to do a login screen, if not for the high security requirements of the site, the login screen I certainly do not want that we often enter the account password to verify identity, we want as long as a validation, you can grow time stay logged in.

Although you can skip the session login authentication to achieve, but it is after the temporary close the page or close the browser, it will disappear, I think it is not very convenient.
Learning Link: https: //www.runoob.com/php/php-sessions.html

Then I tried a way that is to the data table (the account password information) add a [state] landing column, by identifying the [state] landed value of the column to determine whether the user has been validated up.

However, the above two methods are not what I want, what I need is that as long as the landing page in the same browser, I just landed authenticate once, and then a long period of time can not require authentication, directly to my Home.

cookie can be achieved, it is stored in the computer server, you can set a cookie aging, day, month, year are OK.
Learning Link: HTTPS: //www.runoob.com/php/php-cookies.html
---------------------------- == = ------------------------------------------------- -------------------------------------------------- ------

The following is the text

js can set a cookie, learning links: HTTPS: //www.runoob.com/js/js-cookies.html
PHP can also set a cookie, learning link: https: //www.runoob.com/php/php-cookies. html

I used the php method to set a cookie
and then written in HTML js inside, get cookie

The following function is the core, I did not write, in fact, the most critical function of this entire article, I wrote the article The main purpose here is to manage the whole idea of ​​what I want to write down their ideas, you can also provide a reference. This function I was looking on the Internet, it is easy to find, that I did not look inside the code, call me directly, add parameters can be used, the following I will speak carefully.

    <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>

First put renderings

Landing page (Account: A1234; password: 1234)
Here Insert Picture Description
account password error display pop
Here Insert Picture Description
account password correctly, go to my home page, click on the logout, you can return to the landing page
Here Insert Picture Description

Four files (all)
1.html
2.php
my.html
my.php

Code is placed directly (with analytical)

1.html (login page)

<!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 ([My Home] page)

<!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");//回到登陆页面

?>

Code mind map

Here Insert Picture Description
You should be able to understand it, written very carefully, and if you want to transplant my code, remember to change those addresses, what parameters should all know it, there are questions to ask of it.
------------------------ ===== --------------------- -------------------------------------------------- -----------------------------------
burst liver to make, very detailed Ha, I hope you have help, if you can, you can order a praise, hee hee hee.

Released five original articles · won praise 17 · views 3577

Guess you like

Origin blog.csdn.net/weixin_42899627/article/details/104741885