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 相关文章推荐
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
jQuery Selector选择器小结
May 06 Javascript
javascript 事件绑定问题
Jan 01 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
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面试题附答案
2009/01/07 PHP
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
Python3解释器知识点总结
2019/02/19 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
python 绘制国旗的示例
2020/09/27 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
学院书画协会部门职责
2013/11/28 职场文书
市场部专员岗位职责
2013/11/30 职场文书
护士辞职信范文
2014/01/19 职场文书
出国留学计划书
2014/04/27 职场文书
社团活动总结
2014/04/28 职场文书
北京申奥口号
2014/06/19 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
go语言中json数据的读取和写出操作
2021/04/28 Golang