运用js依靠cooker,实现在输入框中短时间记住账号密码

用户在输入账号密码时,一些网站会自动在输入栏中暂时保存用户输入的信息,让用户可以在短时间内不用再次输入账号密码,登录自己的账号,效果图如下:.

首先我们应该有自己的登录界面,这个利用login.html文件作为登录界面,css html就可以实现;上图的代码比较繁琐,就不做仔细研究了,就简单的写一个form表单作为代替代码如下:

<form action="sever.php" method="post" enctype="application/x-www-form-urlencoded">
                <input id="username" type="text" name="username" class="username" placeholder="Username">
                <input id="password" type="password" name="password" class="password" placeholder="Password">
                <button type="submit">Sign me in</button>
                <div class="error"><span>+</span></div>
            </form>

随便建立一个index.html文件作为登陆成功的主页,

还有一个data.php文件实现一个简单的存储数据的用处(利用数组方式):

$Log=array("username"=>"phh","password"=>"1218");//用于存储用户的账户密码

建立一个sever.php文件做为服务器,然后做一个简单的登录处理;

header("Content-type:text/html;charset=utf-8");
include"data.php";
if($_SERVER["REQUEST_METHOD"]=="POST") {
    if($_POST["username"]==$Log["username"]&&$_POST["password"]==$Log["password"]){       setC($_POST["username"],$_POST["password"]);  //登录成功之后会在本地浏览器中创建相应的cookie

echo" <script> alert(‘登陆成功‘); window.location.href=‘index.php‘; //跳转至主页); </script> "; }else{ echo"<script> alert(‘密码或账户错误请重新登陆‘); window.location.href=‘login.html‘;//密码错误跳转至登录界面 </script>"; } }

else{ echo"<script> window.location.href=‘login.html‘; alert(‘请登录‘);//如果没有通过登录界面的form表单登录,则页跳转至登录界面  </script> ";

既然是依靠cookie实现这个这个功能我们就需要先在sever.php中设置设置我们的cookie,

function setC($user,$pwd){
    setcookie("username",$user,time()+5*60);
    setcookie("password",$pwd,time()+5*60);
}

这里我设置了两条五分钟的账号密码的cookie;

接下来我在登录界面也就是login.html文件的javascript中对cookie作出相应处理并将值赋给帐号和密码框如下;

<script type="text/javascript">
            function getCookByKey(key){
                var cookie=document.cookie.split(";");//获取本地cookie并将其分割成数字储存在cookie中;
                for(var i=0;i<cookie.length;i++)
                {
                    var val=cookie[i].trim();//通过for循环获取cookie的每个键值对并去除空格                               if(val.indexOf(key +"=")==0)

                   { var value=val.split("=");                     console.log(value[1]);                      return value[1]; } //获取账号密码的值并返回

                }              } 

                    document.getElementById("username").value=getCookByKey("username");                     document.getElementById("password").value=getCookByKey("password");//将获取的账号密码赋给账号密码框

</script>

这样我们就实现了暂时将账号密码在相应输入框中显示的功能,由于cookie有时限所以过一段时间输入框中的内容就会自动消失;

作为初学者文中难免有错,希望大神们多多指点;