cookie、session、localStorage这三个应该是最让程序员头疼的了,我利用简单的登录界面的username和password来说明一下吧.
1.cookie用来存储用户相关数据,存储的位置在用户本地:
首先是登录界面定义:
1
2
3
4
5
6
|
< 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服务器处理,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<?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其实里面就是一条数据,
1
|
$info = array ( "username" => "admin" , "password" => "admin" ); |
这个数据主要是核对输入的用户名和密码是否正确.
首先在server里面对不也是判断是不是post请求,如果不是就提示重新登录,返回登录界面,确定是post之后,再进行判断信息是不是输入正确,如果正确就setcookie一下.下面的代码我一一解释
1
2
3
4
5
6
7
|
$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已经按我们设置的那个时间存储下来了,然后我们要做的就是免登陆功能,的后台服务器的处理,就像我们登陆其他软件,会提示一周之内免登陆密码,
就是下面的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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的设置与读取;
代码如下:
1
2
3
4
5
6
7
8
|
function se( array $arr ) { session_start(); $_SESSION [ "username" ] = $arr [ "username" ]; $_SESSION [ "password" ] = $arr [ "password" ]; $_SESSION [ "loginIP" ] = $arr [ "loginIP" ]; $_SESSION [ "loginTime" ] = $arr [ "loginTime" ]; } |
首先就会上面的代码,一样是获取四个属性,放到我们的$_SESSION里面;存储下来:
然后就是上面那个代码,带啊可以看到有一个se
1
2
|
$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文件就是 然后就是实现:
1
2
3
4
5
6
7
|
$( function (){ if (localStorage.getItem( "username" )!= "" &&localStorage.getItem( "password" )!= "" ){ document.getElementById( "username" ).value=localStorage.getItem( "username" ); document.getElementById( "password" ).value=localStorage.getItem( "password" ); } }); |
这个函数主要就是创建用php创建的
1
2
3
4
5
6
|
function setStroage( $username , $password ){ echo "<script> localStorage.setItem( 'username' , " . " '" . $username . "' " . " ); localStorage.setItem( 'password' , " . " '" . $password . "' " . " ); </script>"; } |
其实这个东西需要自己慢慢写,我虽然能写出来,但是每次用的时候还是要参考一下这个例子,所以希望我用了好长时间的万能例子对大家有用,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!