纯JS记住账号密码

JavaScript055

纯JS记住账号密码,第1张

参照 - 纯JS操作Cookie

点击submit按钮时,会调用此函数

文档加载完毕后,执行此函数

**说明 : **初始时,浏览器未保存Cookie,JS给各个表单赋空值,赋复选框未勾选状态

**说明 : **未勾选保存密码复选框,JS只提交表单到指定Action,未保存Cookie,同上

**说明 : **浏览器成功保存了用户名与密码

如图所示操作代码即可：

登录页面实现记住用户名和密码功能的方法：

1、使用cookie的方法将用户名和密码保存到本地电脑上；

2、PS在页面载入时获取cookie；

3、在勾选时设置一个cookie的有效时间就可以了。

/**

* 操作Cookie 添加

* @param name

* @param value

* @return

*/

function SetCookie(name,value,days)//两个参数，一个是cookie的名子，一个是值

{

var Days = 30

if(typeof(days)=="undefined"||isNaN(days))

Days=parseInt(days.toString())

//此 cookie 将被保存 30 天 -1为浏览器关闭

if(Days!=-1){

var exp = new Date() //new Date("December 31, 9998")

exp.setTime(exp.getTime() + Days*24*60*60*1000)

document.cookie = name + "="+ escape (value) + "expires=" + exp.toGMTString()

}else{

document.cookie = name + "="+ escape (value) + "expires=-1"

}

}

/**

* 操作Cookie 提取 后台必须是escape编码

* @param name

* @return

*/

function getCookie(name)//取cookies函数

{

var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^]*)(|$)"))

if(arr != null) return unescape(arr[2])return null

}

/**

* 操作Cookie 删除

* @param name

* @return

*/

function delCookie(name)//删除cookie

{

var exp = new Date()

exp.setTime(exp.getTime() - (86400 * 1000 * 1))

var cval=getCookie(name)

if(cval!=null)

document.cookie = name + "="+ escape (cval) + "expires="+exp.toGMTString()

}

/**

* 根据ID获取对象

* @param objName

* @return

*/

function GetObj(objName){

if(typeof(objName)=="undefined")

return null

if(document.getElementById)

return eval('document.getElementById("'+objName+'")')

else

return eval('document.all.'+objName)

}

/**

* 给String 添加trim方法

*/

String.prototype.trim=function(){

return this.replace(/(^\s*)|(\s*$)/g, "")

}

/**

* 给String添加isNullOrempty的方法

*/

String.prototype.isnullorempty=function(){

if(this==null||typeof(this)=="undefined"||this.trim()=="")

return true

return false

}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>login.html</title>

<script type="text/javascript" src="jsTool.js"></script>

<script type="text/javascript">

var cookieName_username="LOGIN_USER_NAME_TEST"

var cookieName_password="LOGIN_PASSWORD_TEST"

var cookieName_autologin="LOGIN_AUTO_TEST"

//得到Cookie信息

function getUserInfoByCookie(){

var uname=getCookie(cookieName_username)

if(uname!=null&&!uname.toString().isnullorempty()){

GetObj('ttuserName').value=uname

GetObj('ck_saveuser').checked=true

}

var upass=getCookie(cookieName_password)

if(upass!=null&&!upass.toString().isnullorempty()){

GetObj('ttpassword').value=upass

GetObj('ck_savepass').checked=true

}

var autologin=getCookie(cookieName_autologin)

if(autologin!=null&&!autologin.toString().isnullorempty())

if(autologin.toString().trim()=="true"){

GetObj('ck_autologin').checked=true

login()//登录

}

}

/**

*登录（保存信息）

*/

function login(){

var tusername=GetObj('ttuserName')

if(tusername.value.trim().isnullorempty()){

alert('您尚未输入用户名!请输入!')

tpassword.focus()

return

}

var tpassword=GetObj('ttpassword')

if(tpassword.value.trim().isnullorempty()){

alert('您尚未输入密码!请输入!')

tpassword.focus()

return

}

delCookie(cookieName_username)//删除用户名Cookie

var tsaveuser=GetObj('ck_saveuser')

if(tsaveuser.checked)

SetCookie(cookieName_username,tusername.value.trim(),7)//保存到Cookie中 保存7天

delCookie(cookieName_password)//删除密码

var tsavepass=GetObj('ck_savepass')

if(tsavepass.checked)

SetCookie(cookieName_password,tpassword.value.trim(),7)

var autologin=GetObj('ck_autologin')

SetCookie(cookieName_autologin,autologin.checked,7)

alert('登录成功!')

}

</script>

</head>

<body onload="getUserInfoByCookie()">

用户名：<input type="text" value="" name="ttuserName" id="ttuserName" maxlength="16"/>

密码：<input type="password" value="" name="ttpassword" id="ttpassword" maxlength="16"/>

<input type="checkbox" name="ck_saveuser" id="ck_saveuser"/>保存用户名

<input type="checkbox" name="ck_savepass" id="ck_savepass"/>保存密码

<input type="checkbox" name="ck_autologin" id="ck_autologin"/>自动登录

<input type="button" value="登录（保存）" onclick="login()"/>

</body>

</html>

能不能审批呀