记住账号密码（密码账号输入框在设置的时间内有效）

最新推荐文章于 2022-03-09 14:54:36 发布

chicuiai6459

最新推荐文章于 2022-03-09 14:54:36 发布

阅读量158

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/u/2983121/blog/907155

版权

前几天在做记住账号密码这个功能，查了资料有了解到：cookie 与 session 两种发送，cookie是在客户端保持登录状态的机制；session是在服务端保持状态的发送。相同点就是可以保持窗口的登录状态，不同点就是cookie容易被劫持，不安全，session相对而言更安全。了解到的就这么多，现在就cookie来直接上代码吧。

html代码有：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="common.js"></script>
</head>
<body>
<form action="">
<p>
  <span>用户名:</span>
  <input id="userName" type="text" value=""/></p>
<p>
  <span>密码:</span>
  <input id="password" type="password" value=""/></p>
<p>
  <span style="font-size:12px; color:blue;">记住密码</span>
  <input id="saveCookie" type="checkbox" value="" /></p>
<p>
  <input id="submit" type="button" value="登录" />
</p>
</form>
</body>
</html>

JS代码有： common.js

function $(objStr){return document.getElementById(objStr);}
window.onload = function(){
	
	
	
  //分析cookie值，显示上次的登陆信息
  var userNameValue = getCookieValue("userName");
   $("userName").value = userNameValue;
  var passwordValue = getCookieValue("password");
   $("password").value = passwordValue;  
  //写入点击事件
   $("submit").onclick = function()
   {
    var userNameValue = $("userName").value;
    var passwordValue = $("password").value;
    //服务器验证（模拟）  
    var isAdmin = userNameValue == "admin" && passwordValue =="123456";
    
    var isUserA = userNameValue == "userA" && passwordValue =="userA";
    
    var isMatched = isAdmin || isUserA;
    if(isMatched){
      if( $("saveCookie").checked){ 
         setCookie("userName",$("userName").value,24,"/");
         setCookie("password",$("password").value,24,"/");
       }  
       alert("登陆成功,欢迎你," + userNameValue + "!");
       self.location.replace("welcome.html");
     }
    else alert("用户名或密码错误，请重新输入！");  
   }
}

cookie.js代码：

//新建cookie。
//hours为空字符串时,cookie的生存期至浏览器会话结束。hours为数字0时,建立的是一个失效的cookie,这个cookie会覆盖已经建立过的同名、同path的cookie（如果这个cookie存在）。
function setCookie(name,value,hours,path){
  var name = escape(name);
  var value = escape(value);
  var expires = new Date();
   expires.setTime(expires.getTime() + hours*3600000);
   path = path == "" ? "" : ";path=" + path;
   _expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString();
   document.cookie = name + "=" + value + _expires + path;
   

}
//获取cookie值
function getCookieValue(name){
  var name = escape(name);
  //读cookie属性，这将返回文档的所有cookie
  var allcookies = document.cookie;    
  //查找名为name的cookie的开始位置
   name += "=";
  var pos = allcookies.indexOf(name);  
  //如果找到了具有该名字的cookie，那么提取并使用它的值
  if (pos != -1){                       //如果pos值为-1则说明搜索"version="失败
    var start = pos + name.length;         //cookie值开始的位置
    var end = allcookies.indexOf(";",start);    //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置
    if (end == -1) end = allcookies.length;    //如果end值为-1说明cookie列表里只有一个cookie
    var value = allcookies.substring(start,end); //提取cookie的值
    return (value);              //对它解码   
     }  
  else return "";                //搜索失败，返回空字符串
}
//删除cookie
function deleteCookie(name,path){
  var name = escape(name);
  var expires = new Date(0);
   path = path == "" ? "" : ";path=" + path;
   document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;
}

转载于:https://my.oschina.net/u/2983121/blog/907155

chicuiai6459

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记住账号密码（密码账号输入框在设置的时间内有效）

前几天在做记住账号密码这个功能，查了资料有了解到：cookie 与 session 两种发送，cookie是在客户端保持登录状态的机制；session是在服务端保持状态的发送。相同点就是可以保持窗口的登录状态，不同点就是cookie容易被劫持，不安全，session相对而言更安...
复制链接

扫一扫