javascript记住用户名和登录密码(两种方式)


Posted in Javascript onAugust 04, 2015

下面主要通过代码给大家展示下javascript记住用户名和登录密码,具体代码内容请看下文。

第一种方式:

CONTENT
    login.html
    welcome.html
    cookie.js
    common.js

login.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=gb2312" />
<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>UserName:</span>
  <input id="userName" type="text" value=""/></p>
<p>
  <span>Password:</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="GO" />
</p>
</form>
</body>
</html>

welcome.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=gb2312" />
<title>welcome</title>
</head>
<body>
<h1>Welcome!</h1>
<a href="login.html">点击返回登陆框</a>
</body>
</html>
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;
}

common.js

function $(objStr){return document.getElementByIdx_x_x(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("用户名或密码错误,请重新输入!");  
   }
}

第二种方式:

<script type="text/javascript">
window.onload=function onLoginLoaded() {
if(isPostBack == "False") {
GetLastUser();
}
}
function GetLastUser() {
var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";//GUID标识符
var usr = GetCookie(id);
if (usr != null) {
document.getElementById('txtUserName').value = usr;
} 
else {
document.getElementById('txtUserName').value = "001";
}
GetPwdAndChk();
}
//点击登录时触发客户端事件
function SetPwdAndChk() {
//取用户名
var usr = document.getElementById('txtUserName').value;
alert(usr);
//将最后一个用户信息写入到Cookie
SetLastUser(usr);
//如果记住密码选项被选中
if(document.getElementById('chkRememberPwd').checked == true) {
//取密码值
var pwd = document.getElementById('txtPassword').value;
alert(pwd);
var expdate = new Date();
expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
//将用户名和密码写入到Cookie
SetCookie(usr, pwd, expdate);
} 
else {
//如果没有选中记住密码,则立即过期
ResetCookie();
}
}
function SetLastUser(usr) {
var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";
var expdate = new Date();
//当前时间加上两周的时间
expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
SetCookie(id, usr, expdate);
}
//用户名失去焦点时调用该方法
function GetPwdAndChk() {
var usr = document.getElementById('txtUserName').value;
var pwd = GetCookie(usr);
if (pwd != null) {
document.getElementById('chkRememberPwd').checked = true;
document.getElementById('txtPassword').value = pwd;
} 
else {
document.getElementById('chkRememberPwd').checked = false;
document.getElementById('txtPassword').value = "";
}
}
//取Cookie的值
function GetCookie(name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
//alert(j);
if (document.cookie.substring(i, j) == arg) return getCookieVal(j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
var isPostBack = "<%= IsPostBack %>";
function getCookieVal(offset) {
var endstr = document.cookie.indexOf(";", offset);
if (endstr == -1) endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
//写入到Cookie
function SetCookie(name, value, expires) {
var argv = SetCookie.arguments;
//本例中length = 3
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : "");
}
function ResetCookie() {
var usr = document.getElementById('txtUserName').value;
var expdate = new Date();
SetCookie(usr, null, expdate);
}
</script>
</head>
<body>
<form id="form1">
<div> 
用户名:<input type="text" ID="txtUserName" onblur="GetPwdAndChk()">
<input type="password" ID="txtPassword">
密码:
<input type="checkbox" ID="chkRememberPwd" />
记住密码
<input type="button" OnClick="SetPwdAndChk()" value="进入"/>
</div>
</form>
</body>

以上就是用两种方式展示javascript记住用户名和登录密码的全部代码,没有来得及整理运行效果图,希望大家能够喜欢。

Javascript 相关文章推荐
js表数据排序 sort table data
Feb 18 Javascript
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
Js实现自定义右键行为
Mar 26 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
Node.js Buffer用法解读
May 18 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 #Javascript
JavaScript运动减速效果实例分析
Aug 04 #Javascript
JavaScript仿静态分页实现方法
Aug 04 #Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 #Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 #Javascript
JavaScript数组各种常见用法实例分析
Aug 04 #Javascript
基于Jquery实现表单验证
Jul 20 #Javascript
You might like
用PHP实现多级树型菜单
2006/10/09 PHP
php数组转成json格式的方法
2015/03/09 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
python正则表达式之对号入座篇
2018/07/24 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
python 随机森林算法及其优化详解
2019/07/11 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
幼师自荐信
2013/10/26 职场文书
学校经典推荐信
2013/10/30 职场文书
检察官就职演讲稿
2014/01/13 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
论文致谢词范文
2015/05/14 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
windows server2008 开启端口的实现方法
2022/06/25 Servers
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技