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>"; } 其實這個東西需要自己慢慢寫，我雖然能寫出來,但是每次用的時候還是要參考一下這個例子,所以希望我用了好長時間的萬能例子對大家有用，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
圖片精選
