定制小程序开发_js cookie完成记住密码功用

 本文为大家分享了js和jQuery记住密码功能的方法，具体如下

一. js 实现记住密码功能

html：

 form id="form22" name="form22" action="checklogin.action" method="post" 
 div 
 label 用户名： /label 
 input type="text" name="username" id="userName" / 
 span id="myuser" /span 
 /div 
 div 
 label 密 nbsp;码： /label 
 input name="password" id="passWord" type="password" / 
 span id="mypass" /span 
 /div 
 div 
 label nbsp; nbsp; /label 
 input type="checkbox" id="saveUserName" / 
 span 记住用户 /span 
 /div 
 input type="button" value="" id="btn_login" / 
 /form 

cookie.js:

function setCookie (name, value) {
 var Days = 30; //此 cookie 将被保存 30 天
 var exp = new Date();
 exp.setTime(exp.getTime() + 1000);
 if(value==""||value=="null"
 ||value=="null"||value==" "){
 }else{
 document.cookie = name + "="+ escape(value) +";expires=Sun, 17-Jan-2038  GMT";
function getCookie(sName){
 var aCookie = document.cookie.split("; ");
 for (var i=0; i aCookie.length; i++)
 var aCrumb = aCookie[i].split("=");
 if (sName == aCrumb[0])
 return aCrumb[1];
 return null;
function checkCookieExist(name){
 if (getCookie(name))
 return true;
 else
 return false;
function deleteCookie(name, path, domain){
 var strCookie;
 // 检查Cookie是否存在
 if (checkCookieExist(name)){
 // 设置Cookie的期限为己过期
 strCookie = name + "=";
 strCookie += (path) path=" + path : "";
 strCookie += (domain) domain=" + domain : "";
 strCookie += "; expires=Thu, 01-Jan-70  GMT";
 document.cookie = strCookie;
function saveCookie(name, value, expires, path, domain, secure){
 var strCookie = name + "=" + value;
 if (expires){
 // 计算Cookie的期限, 参数为天数
 var curTime = new Date();
 curTime.setTime(curTime.getTime() + expires*24*60*60*1000);
 strCookie += "; expires=" + curTime.toGMTString();
 // Cookie的路径
 strCookie += (path) path=" + path : "";
 // Cookie的Domain
 strCookie += (domain) domain=" + domain : "";
 // 是否需要保密传送,为一个布尔值
 strCookie += (secure) secure" : "";
 document.cookie = strCookie;

login.js

window.onload = function(){
 //console.log("ctx: " + "${ctx}");
 var name = getCookie("loginUserName");
 document.getElementById("passWord").value="";
 if(name != null name != "") {
 document.getElementById("userName").value = name; 
 document.getElementById("passWord").focus();
 } else { document.getElementById("userName").focus();
function checkform(){
 ......
 var isChecked = document.getElementById("saveUserName").checked;
 if(isChecked) {
 setCookie("loginUserName",userName);
 ......

二. jquery 实现记住密码功能

参考：lindaZ/

html：

 form 
 input type="text" id="username" name="account" autofocus required placeholder="用户名" 
 input type="password" id="password" name="password" required placeholder="密码" 
 br/ 
 input id="remember_me" type="checkbox" name="remember_me" 
 span for="remember_me" 记住我 /span 
 br/ br/ 
 span 登 录 /span 
 /form 
 script src="jquery.js" type="text/javascript" /script 
 script src="jquery.cookie.js" type="text/javascript" /script 

判断checkbox是否被选中，若选中，则将存储cookie：

if ($("#remember_me").attr("checked")) {
 $.cookie("rmbUser", "true", { expires: 7 }); //存储一个带7天期限的cookie
 $.cookie("username", account, { expires: 7 });
 $.cookie("password", password, { expires: 7 });
else {
 $.cookie("rmbUser", "false", { expire: -1 });
 $.cookie("username", "", { expires: -1 });
 $.cookie("password", "", { expires: -1 });

在每次刷新登录页面加载js时，取出cookie中的用户名和密码，若cookie不为空，用户名和密码输入框被cookie里面的内容填充，复选框设为勾上状态：

$().ready(function(){
 //获取cookie的值
 var username = $.cookie('username');
 var password = $.cookie('password');
 //将获取的值填充入输入框中
 $('#username').val(username);
 $('#password').val(password); 
 if(username != null username != '' password != null password != ''){
 //选中保存秘密的复选框
 $("#remember_me").attr('checked',true);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。