1. 程式人生 > >實現一週之內自動登入的 cookie和session還有localStorage的儲存機制

實現一週之內自動登入的 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>";
}
其實這個東西需要自己慢慢寫   我雖然能寫出來,但是每次用的時候還是要參考一下這個例子,所以希望我用了好長時間的萬能例子對大家有用


相關推薦

實現之內自動登入cookiesession還有localStorage儲存機制

這三個應該是最讓程式設計師頭疼的了,我利用簡單的登入介面的username和password來說明一下吧. 1.cookie用來儲存使用者相關資料,儲存的位置在使用者本地: 首先是登入介面定義: <form action="server.php" method="po

使用cookie實現自動登入

一般網站的登入介面都會有自動登入的一個選項。現在就來實現一個一週內自動登入的功能。 1、如果當用戶登入的時候,在處理頁,要判斷是否選擇了自動登入,然後實現將id和name存進cookie: if($autologin){ setcookie("userid", $use

Spring Security框架下實現自動登入"記住我"功能

本文是Spring Security系列中的一篇。在上一篇文章中,我們通過實現UserDetailsService和UserDetails介面,實現了動態的從資料庫載入使用者、角色、許可權相關資訊,從而實現了登入及授權相關的功能。這一節就在此基礎上新增,登入過程中經常使用的“記住我”功能,也就是我們經常會

第十章 Django框架學習——Cookiesession

保存 服務 span 登錄校驗 請求 查看cookie cookie 如何 rom 第十一章 Django框架學習——Cookie和session 一、Cookie簡介 二、裝飾器版登錄校驗 三、session簡介 四、如何在CBV中使用裝飾器 一、Cookie簡介

齒輪乾貨丨如何利用好CookieSession來提高儲存資訊的安全性

在Web發展歷史中,session與cookie都是偉大的存在,其初衷都是為了記住使用者在網站上的瀏覽資訊,如果沒有其他替代品的出現,幾乎所有web站點都離不開session與cookie。cookie、session的出現是由於Http協議是無狀態的,導致伺服器無法分辨是誰

ASP.Net之使用CookieSession實現自動登入

一、UserLogin.aspx程式碼 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserLogin.aspx.cs" Inherits="UserLoginNameSpace" %>

CookieSession實現儲存登入狀態免登入

  首先Cookie和Session都是為了狀態管理,HTTP協議是無狀態的,不能儲存每次提交的資訊,即當伺服器返回與請求相對應的應答之後,這次事務的所有資訊就丟掉了。   如果使用者發來一個新的請求,伺服器無法知道它是否與上次的請求有聯絡。   對於

element-ui+vue2.0 實現登入實現內記住密碼

1.檔案目錄 2.主頁index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="

cookiesession實現記住密碼,自動登入

在登入帳號、密碼框下,有三種帳號登入模式可供選擇,使用者可根據自己的具體情況選擇其中一種適合自己的模式。 1、網咖模式:勾選網咖模式後,登入的帳號會在歪歪登出/退出的時候自動清除,不會留在登入框中,可以保護自己的帳號不對外洩露,建議在外地上網時使用,比方網咖或者其他

基礎知識《十二》篇文章理解CookieSession

alt str web應用 rfi 密鑰 hide 開始 單位 ews 理解Cookie和Session機制 會話(Session)跟蹤是Web程序中常用的技術,用來跟蹤用戶的整個會話。常用的會話跟蹤技術是Cookie與Session。Co

cookiesession起源,原理,實現

一、引入 1.一種新的需求產生了 隨著web網站的快速發展,網站已經不再用於單純的資訊展示,而是一個龐大的具有互動式的多網頁的應用。在web應用中,資訊的登入是一種很常見的功能,登入後頁面跳轉必須保持登入狀態,不能但是每一次頁面跳轉都需要重新登入。在這樣的需求下cookie應運而生。

cookiesession實現免登陸

Cookie的機制 Cookie是瀏覽器(User Agent)訪問一些網站後,這些網站存放在客戶端的一組資料,用於使網站等跟蹤使用者,實現使用者自定義功能。 Cookie的Domain和Path屬性標識了這個Cookie是哪一個網站傳送給瀏覽器的;Cookie的Expires屬性標識了Co

java自動登入功能記住使用者名稱功能

實現在這兩個功能,都需要用到coolie技術,將所需要的使用者名稱或者密碼帶到瀏覽器端,實現使用者名稱和密碼的記錄,然後完成所要的功能。 一、自動登入功能 後臺的程式碼 1.1、後臺servlet中的程式碼 //1、判斷是否勾選了自動登入的複選框

前端動畫實現——css3的animation、transitiontransform

1.animation:哪個動畫,動畫過程 @keyframes 建立動畫的原理是,將一套 CSS 樣式逐漸變化為另一套樣式。 針對的是一套樣式整體,transition是針對某些屬性所有變化。 .load-border { width: 120px; h

WEB後臺--基於Token的WEB後臺登入認證機制(並講解其他認證機制以及cookiesession機制

繼續這一個系列,基於Token的WEB後臺登入認證機制(並講解cookie和session機制)。每個後端不得不解決的認證問題。 本系列: 文章結構:(1)JWT(一種基於 token 的認證方案)介紹並介紹其他幾大認證機

基於Token的WEB後臺登入認證機制(並講解其他認證機制以及cookiesession機制

幾種常用的認證機制 HTTP Basic Auth HTTP Basic Auth簡單點說明就是每次請求API時都提供使用者的username和password,簡言之,Basic Auth是配合RESTful API 使用的最簡單的認證方式,只需提供使用者

CookieSession簡單實現購物車

作為單身汪的小編,無法體會到被女神逼著清空購物車的那種”快感”!!,罷特!!我可以自己清空呀!! 傲嬌臉~~ 冰箱, 手機, 電視, 手電筒 來一套!!(ps:手電筒是什麼鬼!!) 下面我用Cookie和Session來清空購物車裡的這4樣東東!! 感覺

JavaWeb 過濾器實現30天內自動登入

1、在 index.jsp 中 <body> <h1>30天內自動登陸</h1><hr> <c:if test="${ses

篇文章弄懂cookiesessiontoken

概念 cookie cookie儲存在客戶端,HTTP是無狀態的,HTTP每次發出的時候會附上該域名下的cookie,從而可以給HTTP附上狀態,最常見的就是登入態。 session和token session和token算是一類的,他們是兩種不同的伺服器的驗證

登入時記住密碼——Filter、CookieSession的簡單應用

思路:當用戶進入某一頁面時,用過濾器進行預處理,判斷Session中是否有儲存使用者的登入資訊,如果沒有,則從Cookie中查詢是否有儲存使用者登入資訊的cookie,如果有將其取出,進行登入操作。 1.  使用者的登入頁面login.jsp: <%@ page la