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 相关文章推荐
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
Vue生命周期示例详解
Apr 12 Javascript
JavaScript基础之this详解
Jun 04 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
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控制文件下载速度的方法
2015/03/24 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
设定php简写功能的方法
2019/11/28 PHP
客户端静态页面玩分页
2006/06/26 Javascript
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
静态页面的值传递(三部曲)
2006/09/25 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
python实现电子词典
2020/04/23 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
基于Python实现扑克牌面试题
2019/12/11 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
自荐信的格式
2014/03/10 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
少先队活动总结
2014/08/29 职场文书
学习型党组织心得体会
2014/09/12 职场文书
教师自荐信范文
2015/03/06 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
道歉的话语大全
2015/05/12 职场文书