html 记住账号密码,纯JS记住账号密码

很多登录功能上都有个“记住密码”的功能，其实无非就是对cookie的读取。

引用

添加Cookie

setCookie ( name, value, expdays )

获取Cookie

getCookie ( name )

删除Cookie

delCookie ( name )

代码说明

form表单

记住密码

提交检查函数

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

function check ()

{

//获取表单输入:用户名,密码,是否保存密码

var username = document.getElementById("username").value.trim() ;

var password = document.getElementById("password").value.trim() ;

var isRmbPwd = document.getElementById("isRmbPwd").checked ;

//判断用户名,密码是否为空(全空格也算空)

if ( username.length != 0 && password.length != 0 )

{

//若复选框勾选,则添加Cookie,记录密码

if ( isRmbPwd == true )

{

setCookie ( "This is username", username, 7 ) ;

setCookie ( username, password, 7 ) ;

}

//否则清除Cookie

else

{

delCookie ( "This is username" ) ;

delCookie ( username ) ;

}

return true ;

}

//非法输入提示

else

{

alert('请输入必填字段!!!')

return false ;

}

}

文档初始化函数

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

//将function函数赋值给onload对象

window.onload = function ()

{

//从Cookie获取到用户名

var username = getCookie("This is username") ;

//如果用户名为空,则给表单元素赋空值

if ( username == "" )

{

document.getElementById("username").value="" ;

document.getElementById("password").value="" ;

document.getElementById("isRmbPwd").checked=false ;

}

//获取对应的密码,并把用户名,密码赋值给表单

else

{

var password = getCookie(username) ;

document.getElementById("username").value = username ;

document.getElementById("password").value = password ;

document.getElementById("isRmbPwd").checked = true ;

}

}

运行效果

初始状态

初始表单.png

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

键入用户名密码,未勾选复选框

表单键入,未勾选.png

提交,返回到表单页面

回到表单页面.png

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

键入用户名密码,未勾选复选框

键入表单,勾选.png

提交表单,返回

记住了账号密码.png

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

此时再去掉复选框勾选状态,提交

去掉复选框勾选.png

此时,浏览器就不再保存Cookie了

最终结果.png