這三個應該是最讓程式設計師頭疼的了,我利用簡單的登入介面的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>";
}

其實這個東西需要自己慢慢寫   我雖然能寫出來,但是每次用的時候還是要參考一下這個例子,所以希望我用了好長時間的萬能例子對大家有用