标签：
用户在输入账号密码时,一些网站会自动在输入栏中暂时保存用户输入的信息,让用户可以在短时间内不用再次输入账号密码,登录自己的账号,效果图如下:.
首先我们应该有自己的登录界面,这个利用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有时限所以过一段时间输入框中的内容就会自动消失;
作为初学者文中难免有错,希望大神们多多指点;
标签：
原文地址：http://www.cnblogs.com/ph2205/p/5687719.html
