English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

phpで一週間以内に自動ログインの保存メカニズム（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);-type:text/html;charset=utf8-8"); 
//echo "ddd"; 
if ($_SERVER["REQUEST_METHOD"] == "POST") {//第1ステップ 
//  echo "ddd"1"; 
  if ($_POST["username"] == $info["username"] && $_POST["password"] == $info["password"]) {//第2ステップ 
    $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 setStorage($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()));//これは渡される別の2つのパラメータで、ユーザーのログインアドレスと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();

スーパーアrray $_SESSIONはsessionの設定と読み取りを実現できます；

以下のコードです:

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

まず上記のコードで、同じように4つの属性を取得し、$_SESSIONに保存します；保存します:

それから上記のコードで、seが見えます

$myArr = array_merge($myArr, array("loginIP" => $_SERVER["REMOTE_ADDR"], "loginTime" => time()));//これは渡される別の2つのパラメータで、ユーザーのログインアドレスとcookieの生存時間（検索時間よりも前に消失する）です 
    se($myArr);

ここはsession用に書かれています;

主に以下の4つの属性を保存します：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 setStorage($username, $password){ 
  echo "<script> 
  localStorage.setItem('username'," . "'" . $username . "'" . "); 
  localStorage.setItem('password'," . "'" . $password . "'" . "); 
  </script>"; 
}

実際にはこのようなものは自分で少しずつ書く必要があります。私は書けるかもしれませんが、毎回使用するたびにこの例を参照する必要がありますので、長い間使ってきた万能の例が皆さんに役立つことを願っています。ご覧いただきありがとうございます。皆さんに役立つことを願っています。皆様の本サイトへのサポートに感謝します！

声明：本文の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーにより自発的に提供され、アップロードされました。本サイトは所有権を持ちません。人工編集は行われていません。著作権に関する問題があれば、お気軽にお問い合わせください：notice#oldtoolbag.com（メールを送信する際は、#を@に変更してください。告発を行い、関連する証拠を提供してください。一旦確認がつき、本サイトは侵害が疑われるコンテンツをすぐに削除します。)

基本教程
おすすめ