怎么样利用php实现一周之内cookie登录存储机制?

怎么样利用php实现一周之内cookie登录存储机制?

cookie、session、localStorage这三个应该是最让程序员头疼的了,我利用简单的登录界面的username和password来说明一下吧.

1.cookie用来存储用户相关数据,存储的位置在用户本地:

首先是登录界面定义:

<form action="server.php" method="post"> 
    <input type="text" name="username" class="username" placeholder="Username"> 
    <input type="password" name="password" class="password" placeholder="Password"> 
    <button type="submit">Sign me in</button> 
    <div class="error"><span>+</span></div> 
   </form> 

上面的代码大家都懂吧,就是一个表单.然后就是action的server.php服务器处理,

<?php 
/** 
 * Created by PhpStorm. 
 * User: Administrator 
 * Date: 2016-7-19 
 * Time: 11:50 
 */ 
include "data.php"; 
header("Content-type:text/html;charset=utf-8"); 
//echo "ddd"; 
if ($_SERVER["REQUEST_METHOD"] == "POST") {//第一步 
// echo "ddd1"; 
 if ($_POST["username"] == $info["username"] && $_POST["password"] == $info["password"]) {//第二步 
  $myArr = $_POST; 
  $myArr = array_merge($myArr, array("loginIP" => $_SERVER["REMOTE_ADDR"], "loginTime" => time())); 
  se($myArr); 
  setcookies($_POST["username"], $_POST["password"]); 
  setStroage($_POST["username"], $_POST["password"]); 
  echo "<script> 
  window.location.href='index.php'; 
 </script>"; 
 } 
} else { 
 echo "<script> 
alert('请登录'); 
window.location.href='login.html'; 
</script>"; 
} 
//通过session保存到服务器 
function se(array $arr) 
{ 
 session_start(); 
 $_SESSION["username"] = $arr["username"]; 
 $_SESSION["password"] = $arr["password"]; 
 $_SESSION["loginIP"] = $arr["loginIP"]; 
 $_SESSION["loginTime"] = $arr["loginTime"]; 
} 
//通过cookie保存到本地 
function setCookies($username, $password) 
{ 
 setcookie("username", $username, time() + 120); 
 setcookie("password", $password, time() + 120); 
} 
 
//echo "<script> 
// 
// localStorage.setItem('username','$username'); 
//localStorage.setItem('password'," . "'" . $password . "'" . "); 
//</script>"; 
function setStroage($username, $password){ 
 echo "<script> 
 localStorage.setItem('username'," . "'" . $username . "'" . "); 
 localStorage.setItem('password'," . "'" . $password . "'" . "); 
 </script>"; 
} 

上面加载了一个data.php其实里面就是一条数据,

$info=array("username"=>"admin","password"=>"admin"); 

这个数据主要是核对输入的用户名和密码是否正确.

首先在server里面对不也是判断是不是post请求,如果不是就提示重新登录,返回登录界面,确定是post之后,再进行判断信息是不是输入正确,如果正确就setcookie一下.下面的代码我一一解释

$myArr = $_POST;//把post传过来的数据放在myarr;里面 
  $myArr = array_merge($myArr, array("loginIP" => $_SERVER["REMOTE_ADDR"], "loginTime" => time()));//这是穿的另外两个参数,一个是用户登录地址,另一个是cookie存活时间(会在寻获时间以为消失) 
  se($myArr); 
  setcookies($_POST["username"], $_POST["password"]);//这个是设置cookie,把传过来的两个值设置成cookie,会有一个getCookie进行接收 
  setStroage($_POST["username"], $_POST["password"]); 
  echo "<script> 
 window.location.href='index.php'; 

其实这时候cookie已经按我们设置的那个时间存储下来了,然后我们要做的就是免登陆功能,的后台服务器的处理,就像我们登陆其他软件,会提示一周之内免登陆密码,

就是下面的代码:

function intialLoadInfo(){ 
  $("input:text").val(getCoolieByKey("username"));//这两个就是吧下面获取的之前输入过的用户名和密码进行自动填写(实现目的) 
  $("input:password").val(getCoolieByKey("password")); 
 } 
 //通过key值获取cookie 
 function getCoolieByKey(key){ 
  var cookie=document.cookie.split(";");//这行代码是吧cookie的值进行分离(split),以便于下面遍历(分离后就是一个数组一样) 
  for(var i=0;i<cookie.length;i++){//遍历长度 
   var value=cookie[i].trim();//去掉空格 
   if (value.indexOf(key)==0){//判断是不是第一个值 
    val=value.split("="); 
    console.log(val[0]); 
    return val[1]; 
   } 
  } 
 } 

上面第一个方法执行getCookieByKey(key);

这个带参数的函数接收的参数就是我们上面封装好的myArr数据了;

然后详细解释就在代码了,大家可以参考了.

2.session:session是用来在服务器端存储用户信息,当浏览器关闭的时候,会自动销毁;

session_start();

超级数组$_SESSION可以实现session的设置与读取;

代码如下:

function se(array $arr) 
{ 
 session_start(); 
 $_SESSION["username"] = $arr["username"]; 
 $_SESSION["password"] = $arr["password"]; 
 $_SESSION["loginIP"] = $arr["loginIP"]; 
 $_SESSION["loginTime"] = $arr["loginTime"]; 
} 

首先就会上面的代码,一样是获取四个属性,放到我们的$_SESSION里面;存储下来:

然后就是上面那个代码,带啊可以看到有一个se

$myArr = array_merge($myArr, array("loginIP" => $_SERVER["REMOTE_ADDR"], "loginTime" => time()));//这是穿的另外两个参数,一个是用户登录地址,另一个是cookie存活时间(会在寻获时间以为消失) 
  se($myArr); 

这里就是为了session写的;

他主要是存储四个属性,username.password.IP.time

上面代码中也注释;其实现在我们就可以在session里面查到我们这个自己创建的session了

3.JS端的localStorage:HTML5提供的本地存储方式(可以称为“键值对”数据库);

设置数据:localStorage.setItem("key","value");
读取数据:localStorage.getItem("key");读取的结果是一个字符串;
删除数据:localStorage.removeItem("key");

详细代码如下:

在html下面写的js文件就是 然后就是实现:

$(function (){ 
  if (localStorage.getItem("username")!=""&&localStorage.getItem("password")!=""){ 
   document.getElementById("username").value=localStorage.getItem("username"); 
   document.getElementById("password").value=localStorage.getItem("password"); 
 
  } 
 }); 

这个函数主要就是创建用php创建的

function setStroage($username, $password){ 
 echo "<script> 
 localStorage.setItem('username'," . "'" . $username . "'" . "); 
 localStorage.setItem('password'," . "'" . $password . "'" . "); 
 </script>"; 
} 

其实这个东西需要自己慢慢写,我虽然能写出来,但是每次用的时候还是要参考一下这个例子,所以希望我用了好长时间的万能例子对大家有用,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!